@window-splitter/state 0.2.2 → 0.2.3--canary.823a479.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/.tshy/commonjs.json +1 -0
- package/.tshy/esm.json +1 -0
- package/.tshy-build/esm/index.d.ts +327 -0
- package/.tshy-build/esm/index.d.ts.map +1 -0
- package/.tshy-build/esm/index.js +964 -0
- package/.tshy-build/esm/index.js.map +1 -0
- package/.tshy-build/esm/package.json +3 -0
- package/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +1 -1
- package/.turbo/turbo-test.log +1023 -129
- package/coverage/clover.xml +358 -345
- package/coverage/coverage-final.json +1 -1
- package/coverage/index.html +18 -18
- package/coverage/index.ts.html +624 -402
- package/dist/commonjs/index.d.ts +22 -9
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +189 -134
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +22 -9
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +188 -114
- package/dist/esm/index.js.map +1 -1
- package/package.json +6 -6
- package/src/index.ts +279 -153
- package/src/machine.test.ts +174 -85
- package/src/package.json +3 -0
- package/src/utils.test.ts +22 -9
- package/dist/commonjs/machine.test.d.ts +0 -5
- package/dist/commonjs/machine.test.d.ts.map +0 -1
- package/dist/commonjs/machine.test.js +0 -1038
- package/dist/commonjs/machine.test.js.map +0 -1
- package/dist/commonjs/utils.test.d.ts +0 -2
- package/dist/commonjs/utils.test.d.ts.map +0 -1
- package/dist/commonjs/utils.test.js +0 -79
- package/dist/commonjs/utils.test.js.map +0 -1
- package/dist/esm/machine.test.d.ts +0 -5
- package/dist/esm/machine.test.d.ts.map +0 -1
- package/dist/esm/machine.test.js +0 -1036
- package/dist/esm/machine.test.js.map +0 -1
- package/dist/esm/utils.test.d.ts +0 -2
- package/dist/esm/utils.test.d.ts.map +0 -1
- package/dist/esm/utils.test.js +0 -77
- package/dist/esm/utils.test.js.map +0 -1
package/src/machine.test.ts
CHANGED
|
@@ -9,20 +9,16 @@ import {
|
|
|
9
9
|
groupMachine,
|
|
10
10
|
GroupMachineEvent,
|
|
11
11
|
initializePanel,
|
|
12
|
+
initializePanelHandleData,
|
|
12
13
|
isPanelHandle,
|
|
13
14
|
} from "./index.js";
|
|
14
15
|
import { Actor, createActor } from "xstate";
|
|
15
|
-
|
|
16
|
+
import { spring } from "framer-motion";
|
|
16
17
|
|
|
17
18
|
function getTemplate(actor: Actor<typeof groupMachine>) {
|
|
18
19
|
return buildTemplate(actor.getSnapshot().context);
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
const handleSize = {
|
|
22
|
-
type: "pixel" as const,
|
|
23
|
-
value: 10,
|
|
24
|
-
};
|
|
25
|
-
|
|
26
22
|
function dragHandle(
|
|
27
23
|
actor: Actor<typeof groupMachine>,
|
|
28
24
|
options: {
|
|
@@ -136,6 +132,17 @@ function initializeSizes(
|
|
|
136
132
|
});
|
|
137
133
|
}
|
|
138
134
|
|
|
135
|
+
function waitForCondition(condition: () => boolean) {
|
|
136
|
+
return new Promise<void>((resolve) => {
|
|
137
|
+
const interval = setInterval(() => {
|
|
138
|
+
if (condition()) {
|
|
139
|
+
clearInterval(interval);
|
|
140
|
+
resolve();
|
|
141
|
+
}
|
|
142
|
+
}, 100);
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
|
|
139
146
|
describe("constraints", () => {
|
|
140
147
|
test("works with 2 simple panels - horizontal", () => {
|
|
141
148
|
const actor = createActor(groupMachine, {
|
|
@@ -146,7 +153,7 @@ describe("constraints", () => {
|
|
|
146
153
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
147
154
|
{
|
|
148
155
|
type: "registerPanelHandle",
|
|
149
|
-
data: { id: "resizer-1", size:
|
|
156
|
+
data: { id: "resizer-1", size: "10px" },
|
|
150
157
|
},
|
|
151
158
|
{ type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
|
|
152
159
|
]);
|
|
@@ -164,7 +171,7 @@ describe("constraints", () => {
|
|
|
164
171
|
});
|
|
165
172
|
|
|
166
173
|
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
167
|
-
`"minmax(0px, min(calc(0.
|
|
174
|
+
`"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
|
|
168
175
|
);
|
|
169
176
|
|
|
170
177
|
// Drag the resizer to the left
|
|
@@ -175,7 +182,7 @@ describe("constraints", () => {
|
|
|
175
182
|
});
|
|
176
183
|
|
|
177
184
|
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
178
|
-
`"minmax(0px, min(calc(0.
|
|
185
|
+
`"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
|
|
179
186
|
);
|
|
180
187
|
});
|
|
181
188
|
|
|
@@ -188,7 +195,7 @@ describe("constraints", () => {
|
|
|
188
195
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
189
196
|
{
|
|
190
197
|
type: "registerPanelHandle",
|
|
191
|
-
data: { id: "resizer-1", size:
|
|
198
|
+
data: { id: "resizer-1", size: "10px" },
|
|
192
199
|
},
|
|
193
200
|
{ type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
|
|
194
201
|
]);
|
|
@@ -210,7 +217,7 @@ describe("constraints", () => {
|
|
|
210
217
|
});
|
|
211
218
|
|
|
212
219
|
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
213
|
-
`"minmax(0px, min(calc(0.
|
|
220
|
+
`"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
|
|
214
221
|
);
|
|
215
222
|
|
|
216
223
|
// Drag the resizer to the up
|
|
@@ -225,7 +232,7 @@ describe("constraints", () => {
|
|
|
225
232
|
});
|
|
226
233
|
|
|
227
234
|
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
228
|
-
`"minmax(0px, min(calc(0.
|
|
235
|
+
`"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
|
|
229
236
|
);
|
|
230
237
|
});
|
|
231
238
|
|
|
@@ -251,11 +258,7 @@ describe("constraints", () => {
|
|
|
251
258
|
groupId: "group",
|
|
252
259
|
initialItems: [
|
|
253
260
|
initializePanel({ id: "panel-1" }),
|
|
254
|
-
{
|
|
255
|
-
type: "handle",
|
|
256
|
-
id: "resizer-1",
|
|
257
|
-
size: { type: "pixel", value: 10 },
|
|
258
|
-
},
|
|
261
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
259
262
|
initializePanel({ id: "panel-2" }),
|
|
260
263
|
],
|
|
261
264
|
},
|
|
@@ -277,11 +280,7 @@ describe("constraints", () => {
|
|
|
277
280
|
groupId: "group",
|
|
278
281
|
initialItems: [
|
|
279
282
|
initializePanel({ id: "panel-1" }),
|
|
280
|
-
{
|
|
281
|
-
type: "handle",
|
|
282
|
-
id: "resizer-1",
|
|
283
|
-
size: { type: "pixel", value: 10 },
|
|
284
|
-
},
|
|
283
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
285
284
|
initializePanel({ id: "panel-2" }),
|
|
286
285
|
],
|
|
287
286
|
},
|
|
@@ -305,11 +304,7 @@ describe("constraints", () => {
|
|
|
305
304
|
groupId: "group",
|
|
306
305
|
initialItems: [
|
|
307
306
|
initializePanel({ id: "panel-1" }),
|
|
308
|
-
{
|
|
309
|
-
type: "handle",
|
|
310
|
-
id: "resizer-1",
|
|
311
|
-
size: { type: "pixel", value: 10 },
|
|
312
|
-
},
|
|
307
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
313
308
|
initializePanel({ id: "panel-2" }),
|
|
314
309
|
],
|
|
315
310
|
},
|
|
@@ -329,11 +324,7 @@ describe("constraints", () => {
|
|
|
329
324
|
groupId: "group",
|
|
330
325
|
initialItems: [
|
|
331
326
|
initializePanel({ id: "panel-1", min: "40%" }),
|
|
332
|
-
{
|
|
333
|
-
type: "handle",
|
|
334
|
-
id: "resizer-1",
|
|
335
|
-
size: { type: "pixel", value: 10 },
|
|
336
|
-
},
|
|
327
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
337
328
|
initializePanel({ id: "panel-2", min: "10%", default: "30%" }),
|
|
338
329
|
],
|
|
339
330
|
},
|
|
@@ -357,11 +348,7 @@ describe("constraints", () => {
|
|
|
357
348
|
groupId: "group",
|
|
358
349
|
initialItems: [
|
|
359
350
|
initializePanel({ id: "panel-1", max: "90%" }),
|
|
360
|
-
{
|
|
361
|
-
type: "handle",
|
|
362
|
-
id: "resizer-1",
|
|
363
|
-
size: { type: "pixel", value: 10 },
|
|
364
|
-
},
|
|
351
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
365
352
|
initializePanel({ id: "panel-2", default: "30%" }),
|
|
366
353
|
],
|
|
367
354
|
},
|
|
@@ -373,12 +360,9 @@ describe("constraints", () => {
|
|
|
373
360
|
initializeSizes(actor, { width: 500, height: 200 });
|
|
374
361
|
|
|
375
362
|
capturePixelValues(actor, () => {
|
|
376
|
-
dragHandle(actor, { id: "resizer-1", delta:
|
|
363
|
+
dragHandle(actor, { id: "resizer-1", delta: 500 });
|
|
364
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"450px 10px 40px"`);
|
|
377
365
|
});
|
|
378
|
-
|
|
379
|
-
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
380
|
-
`"minmax(0px, min(calc(0.9183673469387755 * (100% - 10px)), 90%)) 10px minmax(0px, min(calc(0.08163265306122448 * (100% - 10px)), 100%))"`
|
|
381
|
-
);
|
|
382
366
|
});
|
|
383
367
|
|
|
384
368
|
test("panel can have a min", () => {
|
|
@@ -390,7 +374,7 @@ describe("constraints", () => {
|
|
|
390
374
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
391
375
|
{
|
|
392
376
|
type: "registerPanelHandle",
|
|
393
|
-
data: { id: "resizer-1", size:
|
|
377
|
+
data: { id: "resizer-1", size: "10px" },
|
|
394
378
|
},
|
|
395
379
|
{
|
|
396
380
|
type: "registerPanel",
|
|
@@ -419,7 +403,7 @@ describe("constraints", () => {
|
|
|
419
403
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
420
404
|
{
|
|
421
405
|
type: "registerPanelHandle",
|
|
422
|
-
data: { id: "resizer-1", size:
|
|
406
|
+
data: { id: "resizer-1", size: "10px" },
|
|
423
407
|
},
|
|
424
408
|
{
|
|
425
409
|
type: "registerPanel",
|
|
@@ -450,7 +434,7 @@ describe("constraints", () => {
|
|
|
450
434
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
451
435
|
{
|
|
452
436
|
type: "registerPanelHandle",
|
|
453
|
-
data: { id: "resizer-1", size:
|
|
437
|
+
data: { id: "resizer-1", size: "10px" },
|
|
454
438
|
},
|
|
455
439
|
{
|
|
456
440
|
type: "registerPanel",
|
|
@@ -460,7 +444,7 @@ describe("constraints", () => {
|
|
|
460
444
|
initializeSizes(actor, { width: 500, height: 200 });
|
|
461
445
|
|
|
462
446
|
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
463
|
-
`"minmax(0px, min(calc(1 * (100% - 310px)), 100%)) 10px minmax(0px, min(calc(1.
|
|
447
|
+
`"minmax(0px, min(calc(1 * (100% - 310px)), 100%)) 10px minmax(0px, min(calc(1.57894736842105263158 * (100% - 310px)), 100%))"`
|
|
464
448
|
);
|
|
465
449
|
|
|
466
450
|
capturePixelValues(actor, () => {
|
|
@@ -477,7 +461,7 @@ describe("constraints", () => {
|
|
|
477
461
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
478
462
|
{
|
|
479
463
|
type: "registerPanelHandle",
|
|
480
|
-
data: { id: "resizer-1", size:
|
|
464
|
+
data: { id: "resizer-1", size: "10px" },
|
|
481
465
|
},
|
|
482
466
|
{
|
|
483
467
|
type: "registerPanel",
|
|
@@ -489,7 +473,7 @@ describe("constraints", () => {
|
|
|
489
473
|
},
|
|
490
474
|
{
|
|
491
475
|
type: "registerPanelHandle",
|
|
492
|
-
data: { id: "resizer-2", size:
|
|
476
|
+
data: { id: "resizer-2", size: "10px" },
|
|
493
477
|
},
|
|
494
478
|
{
|
|
495
479
|
type: "registerPanel",
|
|
@@ -516,11 +500,7 @@ describe("constraints", () => {
|
|
|
516
500
|
groupId: "group",
|
|
517
501
|
initialItems: [
|
|
518
502
|
initializePanel({ id: "panel-1" }),
|
|
519
|
-
{
|
|
520
|
-
type: "handle",
|
|
521
|
-
id: "resizer-1",
|
|
522
|
-
size: { type: "pixel", value: 10 },
|
|
523
|
-
},
|
|
503
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
524
504
|
initializePanel({ id: "panel-2" }),
|
|
525
505
|
],
|
|
526
506
|
},
|
|
@@ -557,7 +537,7 @@ describe("constraints", () => {
|
|
|
557
537
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
558
538
|
{
|
|
559
539
|
type: "registerPanelHandle",
|
|
560
|
-
data: { id: "resizer-1", size:
|
|
540
|
+
data: { id: "resizer-1", size: "10px" },
|
|
561
541
|
},
|
|
562
542
|
{ type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
|
|
563
543
|
]);
|
|
@@ -577,20 +557,19 @@ describe("constraints", () => {
|
|
|
577
557
|
});
|
|
578
558
|
|
|
579
559
|
describe("collapsible panel", () => {
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
560
|
+
const springAnimation = spring({
|
|
561
|
+
keyframes: [0, 1],
|
|
562
|
+
velocity: 1,
|
|
563
|
+
stiffness: 100,
|
|
564
|
+
damping: 10,
|
|
565
|
+
mass: 1.0,
|
|
566
|
+
});
|
|
567
|
+
const springEasing = (t: number) => springAnimation.next(t * 1000).value;
|
|
588
568
|
|
|
589
569
|
test.each([
|
|
590
570
|
undefined,
|
|
591
571
|
"ease-in-out" as const,
|
|
592
|
-
|
|
593
|
-
// { duration: 1000, easing: springEasing },
|
|
572
|
+
{ duration: 1000, easing: springEasing },
|
|
594
573
|
])("panel can be collapsible: %s", async (animation) => {
|
|
595
574
|
const actor = createActor(groupMachine, {
|
|
596
575
|
input: { groupId: "group" },
|
|
@@ -600,7 +579,7 @@ describe("collapsible panel", () => {
|
|
|
600
579
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
601
580
|
{
|
|
602
581
|
type: "registerPanelHandle",
|
|
603
|
-
data: { id: "resizer-1", size:
|
|
582
|
+
data: { id: "resizer-1", size: "10px" },
|
|
604
583
|
},
|
|
605
584
|
{
|
|
606
585
|
type: "registerPanel",
|
|
@@ -654,6 +633,35 @@ describe("collapsible panel", () => {
|
|
|
654
633
|
});
|
|
655
634
|
});
|
|
656
635
|
|
|
636
|
+
test("throws when you collapse a panel and there are no handles", async () => {
|
|
637
|
+
const actor = createActor(groupMachine, {
|
|
638
|
+
input: {
|
|
639
|
+
groupId: "group",
|
|
640
|
+
initialItems: [initializePanel({ id: "panel-1" })],
|
|
641
|
+
},
|
|
642
|
+
}).start();
|
|
643
|
+
|
|
644
|
+
initializeSizes(actor, { width: 500, height: 200 });
|
|
645
|
+
|
|
646
|
+
const spy = vi.fn();
|
|
647
|
+
let didError = false;
|
|
648
|
+
|
|
649
|
+
actor.subscribe({
|
|
650
|
+
error: (e) => {
|
|
651
|
+
spy(e);
|
|
652
|
+
didError = true;
|
|
653
|
+
},
|
|
654
|
+
});
|
|
655
|
+
|
|
656
|
+
actor.send({ type: "collapsePanel", panelId: "panel-1" });
|
|
657
|
+
|
|
658
|
+
await waitForCondition(() => didError);
|
|
659
|
+
|
|
660
|
+
expect(spy).toHaveBeenCalledWith(
|
|
661
|
+
new Error("Cant find handle for panel: panel-1")
|
|
662
|
+
);
|
|
663
|
+
});
|
|
664
|
+
|
|
657
665
|
test("collapsible panel can have collapsed size - right", async () => {
|
|
658
666
|
const actor = createActor(groupMachine, {
|
|
659
667
|
input: { groupId: "group" },
|
|
@@ -663,7 +671,7 @@ describe("collapsible panel", () => {
|
|
|
663
671
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
664
672
|
{
|
|
665
673
|
type: "registerPanelHandle",
|
|
666
|
-
data: { id: "resizer-1", size:
|
|
674
|
+
data: { id: "resizer-1", size: "10px" },
|
|
667
675
|
},
|
|
668
676
|
{
|
|
669
677
|
type: "registerPanel",
|
|
@@ -703,6 +711,49 @@ describe("collapsible panel", () => {
|
|
|
703
711
|
});
|
|
704
712
|
});
|
|
705
713
|
|
|
714
|
+
test("non collapsible panels should have drag overflow too", async () => {
|
|
715
|
+
const actor = createActor(groupMachine, {
|
|
716
|
+
input: { groupId: "group" },
|
|
717
|
+
}).start();
|
|
718
|
+
|
|
719
|
+
sendAll(actor, [
|
|
720
|
+
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
721
|
+
{
|
|
722
|
+
type: "registerPanelHandle",
|
|
723
|
+
data: { id: "resizer-1", size: "10px" },
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
type: "registerPanel",
|
|
727
|
+
data: initializePanel({
|
|
728
|
+
id: "panel-2",
|
|
729
|
+
default: "200px",
|
|
730
|
+
min: "200px",
|
|
731
|
+
}),
|
|
732
|
+
},
|
|
733
|
+
]);
|
|
734
|
+
|
|
735
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
736
|
+
`"minmax(0px, 1fr) 10px 200px"`
|
|
737
|
+
);
|
|
738
|
+
initializeSizes(actor, { width: 500, height: 200 });
|
|
739
|
+
|
|
740
|
+
capturePixelValues(actor, () => {
|
|
741
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
|
|
742
|
+
|
|
743
|
+
// Drag into the the panel
|
|
744
|
+
dragHandle(actor, { id: "resizer-1", delta: 50 });
|
|
745
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
|
|
746
|
+
|
|
747
|
+
// Drag into the start
|
|
748
|
+
dragHandle(actor, { id: "resizer-1", delta: -50 });
|
|
749
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
|
|
750
|
+
|
|
751
|
+
// Drag into the drag buffer but not past it
|
|
752
|
+
dragHandle(actor, { id: "resizer-1", delta: -25 });
|
|
753
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"265px 10px 225px"`);
|
|
754
|
+
});
|
|
755
|
+
});
|
|
756
|
+
|
|
706
757
|
test("can expand default collapsed panel via event", async () => {
|
|
707
758
|
const actor = createActor(groupMachine, {
|
|
708
759
|
input: { groupId: "group" },
|
|
@@ -712,7 +763,7 @@ describe("collapsible panel", () => {
|
|
|
712
763
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
713
764
|
{
|
|
714
765
|
type: "registerPanelHandle",
|
|
715
|
-
data: { id: "resizer-1", size:
|
|
766
|
+
data: { id: "resizer-1", size: "10px" },
|
|
716
767
|
},
|
|
717
768
|
{
|
|
718
769
|
type: "registerPanel",
|
|
@@ -753,7 +804,7 @@ describe("collapsible panel", () => {
|
|
|
753
804
|
},
|
|
754
805
|
{
|
|
755
806
|
type: "registerPanelHandle",
|
|
756
|
-
data: { id: "resizer-1", size:
|
|
807
|
+
data: { id: "resizer-1", size: "10px" },
|
|
757
808
|
},
|
|
758
809
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
759
810
|
]);
|
|
@@ -793,7 +844,7 @@ describe("collapsible panel", () => {
|
|
|
793
844
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
794
845
|
{
|
|
795
846
|
type: "registerPanelHandle",
|
|
796
|
-
data: { id: "resizer-1", size:
|
|
847
|
+
data: { id: "resizer-1", size: "10px" },
|
|
797
848
|
},
|
|
798
849
|
{
|
|
799
850
|
type: "registerPanel",
|
|
@@ -840,7 +891,7 @@ describe("collapsible panel", () => {
|
|
|
840
891
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
841
892
|
{
|
|
842
893
|
type: "registerPanelHandle",
|
|
843
|
-
data: { id: "resizer-1", size:
|
|
894
|
+
data: { id: "resizer-1", size: "10px" },
|
|
844
895
|
},
|
|
845
896
|
{
|
|
846
897
|
type: "registerPanel",
|
|
@@ -904,7 +955,7 @@ describe("collapsible panel", () => {
|
|
|
904
955
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
905
956
|
{
|
|
906
957
|
type: "registerPanelHandle",
|
|
907
|
-
data: { id: "resizer-1", size:
|
|
958
|
+
data: { id: "resizer-1", size: "10px" },
|
|
908
959
|
},
|
|
909
960
|
{
|
|
910
961
|
type: "registerPanel",
|
|
@@ -952,7 +1003,7 @@ describe("collapsible panel", () => {
|
|
|
952
1003
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
953
1004
|
{
|
|
954
1005
|
type: "registerPanelHandle",
|
|
955
|
-
data: { id: "resizer-1", size:
|
|
1006
|
+
data: { id: "resizer-1", size: "10px" },
|
|
956
1007
|
},
|
|
957
1008
|
{
|
|
958
1009
|
type: "registerPanel",
|
|
@@ -1013,25 +1064,25 @@ describe("collapsible panel", () => {
|
|
|
1013
1064
|
panelId: "panel-2",
|
|
1014
1065
|
controlled: true,
|
|
1015
1066
|
});
|
|
1016
|
-
expect(getTemplate(actor)).toMatchInlineSnapshot(`"
|
|
1067
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"321px 10px 169px"`);
|
|
1017
1068
|
});
|
|
1018
1069
|
|
|
1019
1070
|
spy.mockReset();
|
|
1020
1071
|
|
|
1021
|
-
actor.send({ type: "collapsePanel", panelId: "panel-2" });
|
|
1072
|
+
actor.send({ type: "collapsePanel", panelId: "panel-2", controlled: true });
|
|
1022
1073
|
await waitForIdle(actor);
|
|
1023
1074
|
|
|
1024
1075
|
// collapse the panel via drag
|
|
1025
1076
|
capturePixelValues(actor, () => {
|
|
1026
|
-
expect(getTemplate(actor)).toMatchInlineSnapshot(`"
|
|
1077
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"470px 10px 20px"`);
|
|
1027
1078
|
});
|
|
1028
1079
|
|
|
1029
|
-
actor.send({ type: "expandPanel", panelId: "panel-2" });
|
|
1080
|
+
actor.send({ type: "expandPanel", panelId: "panel-2", controlled: true });
|
|
1030
1081
|
await waitForIdle(actor);
|
|
1031
1082
|
|
|
1032
1083
|
// collapse the panel via drag
|
|
1033
1084
|
capturePixelValues(actor, () => {
|
|
1034
|
-
expect(getTemplate(actor)).toMatchInlineSnapshot(`"
|
|
1085
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(`"321px 10px 169px"`);
|
|
1035
1086
|
});
|
|
1036
1087
|
});
|
|
1037
1088
|
});
|
|
@@ -1046,7 +1097,7 @@ describe("conditional panel", () => {
|
|
|
1046
1097
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
1047
1098
|
{
|
|
1048
1099
|
type: "registerPanelHandle",
|
|
1049
|
-
data: { id: "resizer-1", size:
|
|
1100
|
+
data: { id: "resizer-1", size: "10px" },
|
|
1050
1101
|
},
|
|
1051
1102
|
{ type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
|
|
1052
1103
|
]);
|
|
@@ -1060,7 +1111,7 @@ describe("conditional panel", () => {
|
|
|
1060
1111
|
sendAll(actor, [
|
|
1061
1112
|
{
|
|
1062
1113
|
type: "registerPanelHandle",
|
|
1063
|
-
data: { id: "resizer-2", size:
|
|
1114
|
+
data: { id: "resizer-2", size: "10px" },
|
|
1064
1115
|
},
|
|
1065
1116
|
{
|
|
1066
1117
|
type: "registerDynamicPanel",
|
|
@@ -1093,7 +1144,7 @@ describe("conditional panel", () => {
|
|
|
1093
1144
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
1094
1145
|
{
|
|
1095
1146
|
type: "registerPanelHandle",
|
|
1096
|
-
data: { id: "resizer-1", size:
|
|
1147
|
+
data: { id: "resizer-1", size: "10px" },
|
|
1097
1148
|
},
|
|
1098
1149
|
{
|
|
1099
1150
|
type: "registerPanel",
|
|
@@ -1110,7 +1161,7 @@ describe("conditional panel", () => {
|
|
|
1110
1161
|
sendAll(actor, [
|
|
1111
1162
|
{
|
|
1112
1163
|
type: "registerPanelHandle",
|
|
1113
|
-
data: { id: "resizer-2", size:
|
|
1164
|
+
data: { id: "resizer-2", size: "10px" },
|
|
1114
1165
|
},
|
|
1115
1166
|
{
|
|
1116
1167
|
type: "registerDynamicPanel",
|
|
@@ -1148,7 +1199,7 @@ describe("conditional panel", () => {
|
|
|
1148
1199
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
1149
1200
|
{
|
|
1150
1201
|
type: "registerPanelHandle",
|
|
1151
|
-
data: { id: "resizer-1", size:
|
|
1202
|
+
data: { id: "resizer-1", size: "10px" },
|
|
1152
1203
|
},
|
|
1153
1204
|
{
|
|
1154
1205
|
type: "registerPanel",
|
|
@@ -1165,7 +1216,7 @@ describe("conditional panel", () => {
|
|
|
1165
1216
|
sendAll(actor, [
|
|
1166
1217
|
{
|
|
1167
1218
|
type: "registerPanelHandle",
|
|
1168
|
-
data: { id: "resizer-2", size:
|
|
1219
|
+
data: { id: "resizer-2", size: "10px" },
|
|
1169
1220
|
},
|
|
1170
1221
|
{
|
|
1171
1222
|
type: "registerDynamicPanel",
|
|
@@ -1201,7 +1252,7 @@ describe("conditional panel", () => {
|
|
|
1201
1252
|
{ type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
|
|
1202
1253
|
{
|
|
1203
1254
|
type: "registerPanelHandle",
|
|
1204
|
-
data: { id: "resizer-1", size:
|
|
1255
|
+
data: { id: "resizer-1", size: "10px" },
|
|
1205
1256
|
},
|
|
1206
1257
|
{ type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
|
|
1207
1258
|
]);
|
|
@@ -1215,7 +1266,7 @@ describe("conditional panel", () => {
|
|
|
1215
1266
|
sendAll(actor, [
|
|
1216
1267
|
{
|
|
1217
1268
|
type: "registerPanelHandle",
|
|
1218
|
-
data: { id: "resizer-2", size:
|
|
1269
|
+
data: { id: "resizer-2", size: "10px", order: 1 },
|
|
1219
1270
|
},
|
|
1220
1271
|
{
|
|
1221
1272
|
type: "registerDynamicPanel",
|
|
@@ -1250,6 +1301,44 @@ describe("conditional panel", () => {
|
|
|
1250
1301
|
expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
|
|
1251
1302
|
});
|
|
1252
1303
|
});
|
|
1304
|
+
|
|
1305
|
+
test("distributes space on both sides of dynamic panel as needed", async () => {
|
|
1306
|
+
const actor = createActor(groupMachine, {
|
|
1307
|
+
input: {
|
|
1308
|
+
groupId: "group",
|
|
1309
|
+
initialItems: [
|
|
1310
|
+
initializePanel({ id: "panel-1" }),
|
|
1311
|
+
initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
1312
|
+
initializePanel({ id: "panel-2", max: "50px" }),
|
|
1313
|
+
initializePanelHandleData({ id: "resizer-2", size: "10px" }),
|
|
1314
|
+
initializePanel({ id: "panel-3", default: "300px" }),
|
|
1315
|
+
initializePanelHandleData({ id: "resizer-3", size: "10px" }),
|
|
1316
|
+
initializePanel({ id: "panel-4", max: "50px" }),
|
|
1317
|
+
initializePanelHandleData({ id: "resizer-4", size: "10px" }),
|
|
1318
|
+
initializePanel({ id: "panel-5", max: "300px" }),
|
|
1319
|
+
],
|
|
1320
|
+
},
|
|
1321
|
+
}).start();
|
|
1322
|
+
|
|
1323
|
+
initializeSizes(actor, { width: 500, height: 200 });
|
|
1324
|
+
|
|
1325
|
+
capturePixelValues(actor, () => {
|
|
1326
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
1327
|
+
`"0px 10px 50px 10px 300px 10px 50px 10px 60px"`
|
|
1328
|
+
);
|
|
1329
|
+
});
|
|
1330
|
+
|
|
1331
|
+
sendAll(actor, [
|
|
1332
|
+
{ type: "unregisterPanelHandle", id: "resizer-2" },
|
|
1333
|
+
{ type: "unregisterPanel", id: "panel-3" },
|
|
1334
|
+
]);
|
|
1335
|
+
|
|
1336
|
+
capturePixelValues(actor, () => {
|
|
1337
|
+
expect(getTemplate(actor)).toMatchInlineSnapshot(
|
|
1338
|
+
`"70px 10px 50px 10px 50px 10px 300px"`
|
|
1339
|
+
);
|
|
1340
|
+
});
|
|
1341
|
+
});
|
|
1253
1342
|
});
|
|
1254
1343
|
|
|
1255
1344
|
describe("errors", () => {
|
package/src/package.json
ADDED
package/src/utils.test.ts
CHANGED
|
@@ -7,18 +7,31 @@ import {
|
|
|
7
7
|
initializePanel,
|
|
8
8
|
} from "./index.js";
|
|
9
9
|
import { createActor } from "xstate";
|
|
10
|
+
import Big from "big.js";
|
|
10
11
|
|
|
11
12
|
describe("getUnitPercentageValue", () => {
|
|
12
13
|
test("works with pixels", () => {
|
|
13
|
-
expect(
|
|
14
|
-
|
|
14
|
+
expect(
|
|
15
|
+
getUnitPercentageValue(100, { type: "pixel", value: new Big(100) })
|
|
16
|
+
).toBe(1);
|
|
17
|
+
expect(
|
|
18
|
+
getUnitPercentageValue(100, { type: "pixel", value: new Big(50) })
|
|
19
|
+
).toBe(0.5);
|
|
15
20
|
});
|
|
16
21
|
|
|
17
22
|
test("works with percentages", () => {
|
|
18
|
-
expect(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
expect(
|
|
24
|
+
getUnitPercentageValue(100, { type: "percent", value: new Big(1) })
|
|
25
|
+
).toBe(1);
|
|
26
|
+
expect(
|
|
27
|
+
getUnitPercentageValue(100, { type: "percent", value: new Big(0.5) })
|
|
28
|
+
).toBe(0.5);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
test("works with 0", () => {
|
|
32
|
+
expect(
|
|
33
|
+
getUnitPercentageValue(0, { type: "pixel", value: new Big(1) })
|
|
34
|
+
).toBe(0);
|
|
22
35
|
});
|
|
23
36
|
});
|
|
24
37
|
|
|
@@ -32,7 +45,7 @@ describe("getCollapsiblePanelForHandleId", () => {
|
|
|
32
45
|
{
|
|
33
46
|
type: "handle",
|
|
34
47
|
id: "resizer-1",
|
|
35
|
-
size: { type: "pixel", value: 10 },
|
|
48
|
+
size: { type: "pixel", value: new Big(10) },
|
|
36
49
|
},
|
|
37
50
|
initializePanel({ id: "panel-2" }),
|
|
38
51
|
],
|
|
@@ -54,7 +67,7 @@ describe("getCollapsiblePanelForHandleId", () => {
|
|
|
54
67
|
{
|
|
55
68
|
type: "handle",
|
|
56
69
|
id: "resizer-1",
|
|
57
|
-
size: { type: "pixel", value: 10 },
|
|
70
|
+
size: { type: "pixel", value: new Big(10) },
|
|
58
71
|
},
|
|
59
72
|
initializePanel({ id: "panel-2", collapsible: true }),
|
|
60
73
|
],
|
|
@@ -89,7 +102,7 @@ describe("getCollapsiblePanelForHandleId", () => {
|
|
|
89
102
|
{
|
|
90
103
|
type: "handle",
|
|
91
104
|
id: "resizer-1",
|
|
92
|
-
size: { type: "pixel", value: 10 },
|
|
105
|
+
size: { type: "pixel", value: new Big(10) },
|
|
93
106
|
},
|
|
94
107
|
],
|
|
95
108
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"machine.test.d.ts","sourceRoot":"","sources":["../../src/machine.test.ts"],"names":[],"mappings":"AAAA;;GAEG"}
|