@zag-js/splitter 0.1.10 → 0.1.13
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/LICENSE +21 -0
- package/dist/index.d.ts +117 -3
- package/dist/index.js +238 -262
- package/dist/index.mjs +233 -265
- package/package.json +12 -11
- package/dist/splitter.connect.d.ts +0 -19
- package/dist/splitter.dom.d.ts +0 -28
- package/dist/splitter.machine.d.ts +0 -2
- package/dist/splitter.types.d.ts +0 -94
package/dist/index.js
CHANGED
|
@@ -2,21 +2,7 @@
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
6
|
var __export = (target, all) => {
|
|
21
7
|
for (var name in all)
|
|
22
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -40,29 +26,12 @@ __export(src_exports, {
|
|
|
40
26
|
module.exports = __toCommonJS(src_exports);
|
|
41
27
|
|
|
42
28
|
// ../../utilities/dom/dist/index.mjs
|
|
43
|
-
var __defProp2 = Object.defineProperty;
|
|
44
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
45
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
46
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
47
|
-
var __pow = Math.pow;
|
|
48
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
49
|
-
var __spreadValues2 = (a, b) => {
|
|
50
|
-
for (var prop in b || (b = {}))
|
|
51
|
-
if (__hasOwnProp2.call(b, prop))
|
|
52
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
53
|
-
if (__getOwnPropSymbols2)
|
|
54
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
55
|
-
if (__propIsEnum2.call(b, prop))
|
|
56
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
57
|
-
}
|
|
58
|
-
return a;
|
|
59
|
-
};
|
|
60
29
|
var dataAttr = (guard) => {
|
|
61
30
|
return guard ? "" : void 0;
|
|
62
31
|
};
|
|
63
32
|
var runIfFn = (v, ...a) => {
|
|
64
33
|
const res = typeof v === "function" ? v(...a) : v;
|
|
65
|
-
return res
|
|
34
|
+
return res ?? void 0;
|
|
66
35
|
};
|
|
67
36
|
var callAll = (...fns) => (...a) => {
|
|
68
37
|
fns.forEach(function(fn) {
|
|
@@ -74,9 +43,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
74
43
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
75
44
|
var isDom = () => typeof window !== "undefined";
|
|
76
45
|
function getPlatform() {
|
|
77
|
-
var _a;
|
|
78
46
|
const agent = navigator.userAgentData;
|
|
79
|
-
return (
|
|
47
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
80
48
|
}
|
|
81
49
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
82
50
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -90,28 +58,27 @@ function isWindow(value) {
|
|
|
90
58
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
91
59
|
}
|
|
92
60
|
function getDocument(el) {
|
|
93
|
-
var _a;
|
|
94
61
|
if (isWindow(el))
|
|
95
62
|
return el.document;
|
|
96
63
|
if (isDocument(el))
|
|
97
64
|
return el;
|
|
98
|
-
return (
|
|
65
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
99
66
|
}
|
|
100
67
|
function defineDomHelpers(helpers) {
|
|
101
68
|
const dom2 = {
|
|
102
69
|
getRootNode: (ctx) => {
|
|
103
|
-
var _a, _b;
|
|
104
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
105
|
-
},
|
|
106
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
107
|
-
getWin: (ctx) => {
|
|
108
70
|
var _a;
|
|
109
|
-
return (_a =
|
|
71
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
110
72
|
},
|
|
73
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
74
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
111
75
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
112
76
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
113
77
|
};
|
|
114
|
-
return
|
|
78
|
+
return {
|
|
79
|
+
...dom2,
|
|
80
|
+
...helpers
|
|
81
|
+
};
|
|
115
82
|
}
|
|
116
83
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
117
84
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -149,9 +116,7 @@ function getPointRelativeToNode(point, element) {
|
|
|
149
116
|
}
|
|
150
117
|
var rtlKeyMap = {
|
|
151
118
|
ArrowLeft: "ArrowRight",
|
|
152
|
-
ArrowRight: "ArrowLeft"
|
|
153
|
-
Home: "End",
|
|
154
|
-
End: "Home"
|
|
119
|
+
ArrowRight: "ArrowLeft"
|
|
155
120
|
};
|
|
156
121
|
var sameKeyMap = {
|
|
157
122
|
Up: "ArrowUp",
|
|
@@ -163,10 +128,9 @@ var sameKeyMap = {
|
|
|
163
128
|
Right: "ArrowRight"
|
|
164
129
|
};
|
|
165
130
|
function getEventKey(event, options = {}) {
|
|
166
|
-
var _a;
|
|
167
131
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
168
132
|
let { key } = event;
|
|
169
|
-
key =
|
|
133
|
+
key = sameKeyMap[key] ?? key;
|
|
170
134
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
171
135
|
if (isRtl && key in rtlKeyMap) {
|
|
172
136
|
key = rtlKeyMap[key];
|
|
@@ -203,8 +167,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
203
167
|
};
|
|
204
168
|
}
|
|
205
169
|
function addPointerEvent(target, event, listener, options) {
|
|
206
|
-
|
|
207
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
170
|
+
const type = getEventName(event) ?? event;
|
|
208
171
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
209
172
|
}
|
|
210
173
|
function wrapHandler(fn, filter = false) {
|
|
@@ -215,8 +178,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
215
178
|
}
|
|
216
179
|
function filterPrimaryPointer(fn) {
|
|
217
180
|
return (event) => {
|
|
218
|
-
|
|
219
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
181
|
+
const win = event.view ?? window;
|
|
220
182
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
221
183
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
222
184
|
if (isPrimary)
|
|
@@ -271,7 +233,7 @@ var state = "default";
|
|
|
271
233
|
var savedUserSelect = "";
|
|
272
234
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
273
235
|
function disableTextSelection({ target, doc } = {}) {
|
|
274
|
-
const _document = doc
|
|
236
|
+
const _document = doc ?? document;
|
|
275
237
|
if (isIos()) {
|
|
276
238
|
if (state === "default") {
|
|
277
239
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -285,7 +247,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
285
247
|
return () => restoreTextSelection({ target, doc: _document });
|
|
286
248
|
}
|
|
287
249
|
function restoreTextSelection({ target, doc } = {}) {
|
|
288
|
-
const _document = doc
|
|
250
|
+
const _document = doc ?? document;
|
|
289
251
|
if (isIos()) {
|
|
290
252
|
if (state !== "disabled")
|
|
291
253
|
return;
|
|
@@ -305,7 +267,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
305
267
|
if (target && modifiedElementMap.has(target)) {
|
|
306
268
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
307
269
|
if (target.style.userSelect === "none") {
|
|
308
|
-
target.style.userSelect = targetOldUserSelect
|
|
270
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
309
271
|
}
|
|
310
272
|
if (target.getAttribute("style") === "") {
|
|
311
273
|
target.removeAttribute("style");
|
|
@@ -314,13 +276,13 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
314
276
|
}
|
|
315
277
|
}
|
|
316
278
|
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
const {
|
|
279
|
+
var THRESHOLD = 5;
|
|
280
|
+
function trackPointerMove(doc, opts) {
|
|
281
|
+
const { onPointerMove, onPointerUp } = opts;
|
|
320
282
|
const handlePointerMove = (event, info) => {
|
|
321
283
|
const { point: p } = info;
|
|
322
|
-
const distance = Math.sqrt(
|
|
323
|
-
if (distance <
|
|
284
|
+
const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
|
|
285
|
+
if (distance < THRESHOLD)
|
|
324
286
|
return;
|
|
325
287
|
if (isMouseEvent(event) && isLeftClick(event)) {
|
|
326
288
|
onPointerUp();
|
|
@@ -328,34 +290,40 @@ function trackPointerMove(opts) {
|
|
|
328
290
|
}
|
|
329
291
|
onPointerMove(info, event);
|
|
330
292
|
};
|
|
331
|
-
return callAll(
|
|
293
|
+
return callAll(
|
|
294
|
+
addPointerEvent(doc, "pointermove", handlePointerMove, false),
|
|
295
|
+
addPointerEvent(doc, "pointerup", onPointerUp, false),
|
|
296
|
+
addPointerEvent(doc, "pointercancel", onPointerUp, false),
|
|
297
|
+
addPointerEvent(doc, "contextmenu", onPointerUp, false),
|
|
298
|
+
disableTextSelection({ doc })
|
|
299
|
+
);
|
|
332
300
|
}
|
|
333
301
|
|
|
334
302
|
// src/splitter.dom.ts
|
|
335
303
|
var dom = defineDomHelpers({
|
|
336
304
|
getRootId: (ctx) => {
|
|
337
|
-
var _a
|
|
338
|
-
return (
|
|
305
|
+
var _a;
|
|
306
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
|
|
339
307
|
},
|
|
340
308
|
getSplitterId: (ctx) => {
|
|
341
|
-
var _a
|
|
342
|
-
return (
|
|
309
|
+
var _a;
|
|
310
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
|
|
343
311
|
},
|
|
344
312
|
getToggleButtonId: (ctx) => {
|
|
345
|
-
var _a
|
|
346
|
-
return (
|
|
313
|
+
var _a;
|
|
314
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
|
|
347
315
|
},
|
|
348
316
|
getLabelId: (ctx) => {
|
|
349
|
-
var _a
|
|
350
|
-
return (
|
|
317
|
+
var _a;
|
|
318
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
|
|
351
319
|
},
|
|
352
320
|
getPrimaryPaneId: (ctx) => {
|
|
353
|
-
var _a
|
|
354
|
-
return (
|
|
321
|
+
var _a;
|
|
322
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
|
|
355
323
|
},
|
|
356
324
|
getSecondaryPaneId: (ctx) => {
|
|
357
|
-
var _a
|
|
358
|
-
return (
|
|
325
|
+
var _a;
|
|
326
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
|
|
359
327
|
},
|
|
360
328
|
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
361
329
|
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
@@ -428,12 +396,13 @@ function connect(state2, send, normalize) {
|
|
|
428
396
|
id: dom.getPrimaryPaneId(state2.context),
|
|
429
397
|
"data-disabled": dataAttr(isDisabled),
|
|
430
398
|
"data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
|
|
431
|
-
style:
|
|
399
|
+
style: {
|
|
432
400
|
visibility: "visible",
|
|
433
401
|
flex: `0 0 ${value}px`,
|
|
434
402
|
position: "relative",
|
|
435
|
-
userSelect: isDragging ? "none" : "auto"
|
|
436
|
-
|
|
403
|
+
userSelect: isDragging ? "none" : "auto",
|
|
404
|
+
...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
|
|
405
|
+
}
|
|
437
406
|
}),
|
|
438
407
|
toggleButtonProps: normalize.element({
|
|
439
408
|
"data-part": "toggle-button",
|
|
@@ -540,10 +509,9 @@ function connect(state2, send, normalize) {
|
|
|
540
509
|
var import_core = require("@zag-js/core");
|
|
541
510
|
|
|
542
511
|
// ../../utilities/number/dist/index.mjs
|
|
543
|
-
var __pow2 = Math.pow;
|
|
544
512
|
function round(v, t) {
|
|
545
513
|
let num = valueOf(v);
|
|
546
|
-
const p =
|
|
514
|
+
const p = 10 ** (t ?? 10);
|
|
547
515
|
num = Math.round(num * p) / p;
|
|
548
516
|
return t ? num.toFixed(t) : v.toString();
|
|
549
517
|
}
|
|
@@ -577,7 +545,7 @@ function valueOf(v) {
|
|
|
577
545
|
function decimalOperation(a, op, b) {
|
|
578
546
|
let result = op === "+" ? a + b : a - b;
|
|
579
547
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
580
|
-
const multiplier =
|
|
548
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
581
549
|
a = Math.round(a * multiplier);
|
|
582
550
|
b = Math.round(b * multiplier);
|
|
583
551
|
result = op === "+" ? a + b : a - b;
|
|
@@ -590,211 +558,219 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
|
|
|
590
558
|
// src/splitter.machine.ts
|
|
591
559
|
var { not } = import_core.guards;
|
|
592
560
|
function machine(ctx) {
|
|
593
|
-
return (0, import_core.createMachine)(
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
606
|
-
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
607
|
-
isAtMax: (ctx2) => ctx2.value === ctx2.max
|
|
608
|
-
},
|
|
609
|
-
on: {
|
|
610
|
-
COLLAPSE: {
|
|
611
|
-
actions: "setToMin"
|
|
561
|
+
return (0, import_core.createMachine)(
|
|
562
|
+
{
|
|
563
|
+
id: "splitter",
|
|
564
|
+
initial: "unknown",
|
|
565
|
+
context: {
|
|
566
|
+
orientation: "horizontal",
|
|
567
|
+
min: 224,
|
|
568
|
+
max: 340,
|
|
569
|
+
step: 1,
|
|
570
|
+
value: 256,
|
|
571
|
+
snapOffset: 0,
|
|
572
|
+
...ctx
|
|
612
573
|
},
|
|
613
|
-
|
|
614
|
-
|
|
574
|
+
computed: {
|
|
575
|
+
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
576
|
+
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
577
|
+
isAtMax: (ctx2) => ctx2.value === ctx2.max
|
|
615
578
|
},
|
|
616
|
-
|
|
617
|
-
{
|
|
618
|
-
|
|
579
|
+
on: {
|
|
580
|
+
COLLAPSE: {
|
|
581
|
+
actions: "setToMin"
|
|
582
|
+
},
|
|
583
|
+
EXPAND: {
|
|
619
584
|
actions: "setToMax"
|
|
620
585
|
},
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
},
|
|
626
|
-
states: {
|
|
627
|
-
unknown: {
|
|
628
|
-
on: {
|
|
629
|
-
SETUP: "idle"
|
|
630
|
-
}
|
|
631
|
-
},
|
|
632
|
-
idle: {
|
|
633
|
-
on: {
|
|
634
|
-
POINTER_OVER: {
|
|
635
|
-
guard: not("isFixed"),
|
|
636
|
-
target: "hover:temp"
|
|
586
|
+
TOGGLE: [
|
|
587
|
+
{
|
|
588
|
+
guard: "isCollapsed",
|
|
589
|
+
actions: "setToMax"
|
|
637
590
|
},
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
591
|
+
{
|
|
592
|
+
actions: "setToMin"
|
|
593
|
+
}
|
|
594
|
+
]
|
|
641
595
|
},
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
596
|
+
states: {
|
|
597
|
+
unknown: {
|
|
598
|
+
on: {
|
|
599
|
+
SETUP: "idle"
|
|
600
|
+
}
|
|
645
601
|
},
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
actions: ["invokeOnChangeStart"]
|
|
660
|
-
},
|
|
661
|
-
POINTER_LEAVE: "idle"
|
|
662
|
-
}
|
|
663
|
-
},
|
|
664
|
-
focused: {
|
|
665
|
-
tags: ["focus"],
|
|
666
|
-
on: {
|
|
667
|
-
BLUR: "idle",
|
|
668
|
-
POINTER_DOWN: {
|
|
669
|
-
target: "dragging",
|
|
670
|
-
actions: ["invokeOnChangeStart"]
|
|
671
|
-
},
|
|
672
|
-
ARROW_LEFT: {
|
|
673
|
-
guard: "isHorizontal",
|
|
674
|
-
actions: "decrement"
|
|
675
|
-
},
|
|
676
|
-
ARROW_RIGHT: {
|
|
677
|
-
guard: "isHorizontal",
|
|
678
|
-
actions: "increment"
|
|
679
|
-
},
|
|
680
|
-
ARROW_UP: {
|
|
681
|
-
guard: "isVertical",
|
|
682
|
-
actions: "increment"
|
|
683
|
-
},
|
|
684
|
-
ARROW_DOWN: {
|
|
685
|
-
guard: "isVertical",
|
|
686
|
-
actions: "decrement"
|
|
602
|
+
idle: {
|
|
603
|
+
on: {
|
|
604
|
+
POINTER_OVER: {
|
|
605
|
+
guard: not("isFixed"),
|
|
606
|
+
target: "hover:temp"
|
|
607
|
+
},
|
|
608
|
+
POINTER_LEAVE: "idle",
|
|
609
|
+
FOCUS: "focused"
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
"hover:temp": {
|
|
613
|
+
after: {
|
|
614
|
+
HOVER_DELAY: "hover"
|
|
687
615
|
},
|
|
688
|
-
|
|
689
|
-
{
|
|
690
|
-
|
|
616
|
+
on: {
|
|
617
|
+
POINTER_DOWN: {
|
|
618
|
+
target: "dragging",
|
|
619
|
+
actions: ["invokeOnChangeStart"]
|
|
620
|
+
},
|
|
621
|
+
POINTER_LEAVE: "idle"
|
|
622
|
+
}
|
|
623
|
+
},
|
|
624
|
+
hover: {
|
|
625
|
+
tags: ["focus"],
|
|
626
|
+
on: {
|
|
627
|
+
POINTER_DOWN: {
|
|
628
|
+
target: "dragging",
|
|
629
|
+
actions: ["invokeOnChangeStart"]
|
|
630
|
+
},
|
|
631
|
+
POINTER_LEAVE: "idle"
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
focused: {
|
|
635
|
+
tags: ["focus"],
|
|
636
|
+
on: {
|
|
637
|
+
BLUR: "idle",
|
|
638
|
+
POINTER_DOWN: {
|
|
639
|
+
target: "dragging",
|
|
640
|
+
actions: ["invokeOnChangeStart"]
|
|
641
|
+
},
|
|
642
|
+
ARROW_LEFT: {
|
|
643
|
+
guard: "isHorizontal",
|
|
644
|
+
actions: "decrement"
|
|
645
|
+
},
|
|
646
|
+
ARROW_RIGHT: {
|
|
647
|
+
guard: "isHorizontal",
|
|
648
|
+
actions: "increment"
|
|
649
|
+
},
|
|
650
|
+
ARROW_UP: {
|
|
651
|
+
guard: "isVertical",
|
|
652
|
+
actions: "increment"
|
|
653
|
+
},
|
|
654
|
+
ARROW_DOWN: {
|
|
655
|
+
guard: "isVertical",
|
|
656
|
+
actions: "decrement"
|
|
657
|
+
},
|
|
658
|
+
ENTER: [
|
|
659
|
+
{
|
|
660
|
+
guard: "isCollapsed",
|
|
661
|
+
actions: "setToMin"
|
|
662
|
+
},
|
|
663
|
+
{ actions: "setToMin" }
|
|
664
|
+
],
|
|
665
|
+
HOME: {
|
|
691
666
|
actions: "setToMin"
|
|
692
667
|
},
|
|
693
|
-
|
|
694
|
-
],
|
|
695
|
-
HOME: {
|
|
696
|
-
actions: "setToMin"
|
|
697
|
-
},
|
|
698
|
-
END: {
|
|
699
|
-
actions: "setToMax"
|
|
700
|
-
},
|
|
701
|
-
DOUBLE_CLICK: [
|
|
702
|
-
{
|
|
703
|
-
guard: "isCollapsed",
|
|
668
|
+
END: {
|
|
704
669
|
actions: "setToMax"
|
|
705
670
|
},
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
activities: "trackPointerMove",
|
|
714
|
-
on: {
|
|
715
|
-
POINTER_UP: {
|
|
716
|
-
target: "focused",
|
|
717
|
-
actions: ["invokeOnChangeEnd"]
|
|
718
|
-
},
|
|
719
|
-
POINTER_MOVE: {
|
|
720
|
-
actions: "setPointerValue"
|
|
671
|
+
DOUBLE_CLICK: [
|
|
672
|
+
{
|
|
673
|
+
guard: "isCollapsed",
|
|
674
|
+
actions: "setToMax"
|
|
675
|
+
},
|
|
676
|
+
{ actions: "setToMin" }
|
|
677
|
+
]
|
|
721
678
|
}
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
onPointerUp() {
|
|
736
|
-
send("POINTER_UP");
|
|
737
|
-
el.style.cursor = "";
|
|
679
|
+
},
|
|
680
|
+
dragging: {
|
|
681
|
+
tags: ["focus"],
|
|
682
|
+
entry: "focusSplitter",
|
|
683
|
+
activities: "trackPointerMove",
|
|
684
|
+
on: {
|
|
685
|
+
POINTER_UP: {
|
|
686
|
+
target: "focused",
|
|
687
|
+
actions: ["invokeOnChangeEnd"]
|
|
688
|
+
},
|
|
689
|
+
POINTER_MOVE: {
|
|
690
|
+
actions: "setPointerValue"
|
|
691
|
+
}
|
|
738
692
|
}
|
|
739
|
-
}
|
|
693
|
+
}
|
|
740
694
|
}
|
|
741
695
|
},
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
696
|
+
{
|
|
697
|
+
activities: {
|
|
698
|
+
trackPointerMove: (ctx2, _evt, { send }) => {
|
|
699
|
+
const doc = dom.getDoc(ctx2);
|
|
700
|
+
return trackPointerMove(doc, {
|
|
701
|
+
onPointerMove(info) {
|
|
702
|
+
send({ type: "POINTER_MOVE", point: info.point });
|
|
703
|
+
doc.documentElement.style.cursor = dom.getCursor(ctx2);
|
|
704
|
+
},
|
|
705
|
+
onPointerUp() {
|
|
706
|
+
send("POINTER_UP");
|
|
707
|
+
doc.documentElement.style.cursor = "";
|
|
708
|
+
}
|
|
709
|
+
});
|
|
756
710
|
}
|
|
757
711
|
},
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
var _a;
|
|
764
|
-
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
765
|
-
},
|
|
766
|
-
setToMin(ctx2) {
|
|
767
|
-
ctx2.value = ctx2.min;
|
|
768
|
-
},
|
|
769
|
-
setToMax(ctx2) {
|
|
770
|
-
ctx2.value = ctx2.max;
|
|
712
|
+
guards: {
|
|
713
|
+
isCollapsed: (ctx2) => ctx2.isAtMin,
|
|
714
|
+
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
715
|
+
isVertical: (ctx2) => !ctx2.isHorizontal,
|
|
716
|
+
isFixed: (ctx2) => !!ctx2.fixed
|
|
771
717
|
},
|
|
772
|
-
|
|
773
|
-
|
|
718
|
+
delays: {
|
|
719
|
+
HOVER_DELAY: 250
|
|
774
720
|
},
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
},
|
|
778
|
-
focusSplitter(ctx2) {
|
|
779
|
-
raf(() => {
|
|
721
|
+
actions: {
|
|
722
|
+
invokeOnChange(ctx2, evt) {
|
|
780
723
|
var _a;
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
value = ctx2.
|
|
724
|
+
if (evt.type !== "SETUP") {
|
|
725
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
726
|
+
}
|
|
727
|
+
},
|
|
728
|
+
invokeOnChangeStart(ctx2) {
|
|
729
|
+
var _a;
|
|
730
|
+
(_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
731
|
+
},
|
|
732
|
+
invokeOnChangeEnd(ctx2) {
|
|
733
|
+
var _a;
|
|
734
|
+
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
735
|
+
},
|
|
736
|
+
setToMin(ctx2) {
|
|
737
|
+
ctx2.value = ctx2.min;
|
|
738
|
+
},
|
|
739
|
+
setToMax(ctx2) {
|
|
740
|
+
ctx2.value = ctx2.max;
|
|
741
|
+
},
|
|
742
|
+
increment(ctx2, evt) {
|
|
743
|
+
ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
|
|
744
|
+
},
|
|
745
|
+
decrement(ctx2, evt) {
|
|
746
|
+
ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
|
|
747
|
+
},
|
|
748
|
+
focusSplitter(ctx2) {
|
|
749
|
+
raf(() => {
|
|
750
|
+
var _a;
|
|
751
|
+
return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
|
|
752
|
+
});
|
|
753
|
+
},
|
|
754
|
+
setPointerValue(ctx2, evt) {
|
|
755
|
+
const el = dom.getPrimaryPaneEl(ctx2);
|
|
756
|
+
if (!el)
|
|
757
|
+
return;
|
|
758
|
+
const relativePoint = getPointRelativeToNode(evt.point, el);
|
|
759
|
+
let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
|
|
760
|
+
let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
|
|
761
|
+
if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
|
|
762
|
+
value = ctx2.min;
|
|
763
|
+
} else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
|
|
764
|
+
value = ctx2.max;
|
|
765
|
+
}
|
|
766
|
+
ctx2.value = value;
|
|
795
767
|
}
|
|
796
|
-
ctx2.value = value;
|
|
797
768
|
}
|
|
798
769
|
}
|
|
799
|
-
|
|
770
|
+
);
|
|
800
771
|
}
|
|
772
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
773
|
+
0 && (module.exports = {
|
|
774
|
+
connect,
|
|
775
|
+
machine
|
|
776
|
+
});
|