@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.mjs
CHANGED
|
@@ -1,44 +1,10 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
1
|
// ../../utilities/dom/dist/index.mjs
|
|
19
|
-
var __defProp2 = Object.defineProperty;
|
|
20
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
21
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
22
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
23
|
-
var __pow = Math.pow;
|
|
24
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
25
|
-
var __spreadValues2 = (a, b) => {
|
|
26
|
-
for (var prop in b || (b = {}))
|
|
27
|
-
if (__hasOwnProp2.call(b, prop))
|
|
28
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
29
|
-
if (__getOwnPropSymbols2)
|
|
30
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
31
|
-
if (__propIsEnum2.call(b, prop))
|
|
32
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
33
|
-
}
|
|
34
|
-
return a;
|
|
35
|
-
};
|
|
36
2
|
var dataAttr = (guard) => {
|
|
37
3
|
return guard ? "" : void 0;
|
|
38
4
|
};
|
|
39
5
|
var runIfFn = (v, ...a) => {
|
|
40
6
|
const res = typeof v === "function" ? v(...a) : v;
|
|
41
|
-
return res
|
|
7
|
+
return res ?? void 0;
|
|
42
8
|
};
|
|
43
9
|
var callAll = (...fns) => (...a) => {
|
|
44
10
|
fns.forEach(function(fn) {
|
|
@@ -50,9 +16,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
50
16
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
51
17
|
var isDom = () => typeof window !== "undefined";
|
|
52
18
|
function getPlatform() {
|
|
53
|
-
var _a;
|
|
54
19
|
const agent = navigator.userAgentData;
|
|
55
|
-
return (
|
|
20
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
56
21
|
}
|
|
57
22
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
58
23
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -66,28 +31,27 @@ function isWindow(value) {
|
|
|
66
31
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
67
32
|
}
|
|
68
33
|
function getDocument(el) {
|
|
69
|
-
var _a;
|
|
70
34
|
if (isWindow(el))
|
|
71
35
|
return el.document;
|
|
72
36
|
if (isDocument(el))
|
|
73
37
|
return el;
|
|
74
|
-
return (
|
|
38
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
75
39
|
}
|
|
76
40
|
function defineDomHelpers(helpers) {
|
|
77
41
|
const dom2 = {
|
|
78
42
|
getRootNode: (ctx) => {
|
|
79
|
-
var _a, _b;
|
|
80
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
81
|
-
},
|
|
82
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
83
|
-
getWin: (ctx) => {
|
|
84
43
|
var _a;
|
|
85
|
-
return (_a =
|
|
44
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
86
45
|
},
|
|
46
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
47
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
87
48
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
88
49
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
89
50
|
};
|
|
90
|
-
return
|
|
51
|
+
return {
|
|
52
|
+
...dom2,
|
|
53
|
+
...helpers
|
|
54
|
+
};
|
|
91
55
|
}
|
|
92
56
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
93
57
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -125,9 +89,7 @@ function getPointRelativeToNode(point, element) {
|
|
|
125
89
|
}
|
|
126
90
|
var rtlKeyMap = {
|
|
127
91
|
ArrowLeft: "ArrowRight",
|
|
128
|
-
ArrowRight: "ArrowLeft"
|
|
129
|
-
Home: "End",
|
|
130
|
-
End: "Home"
|
|
92
|
+
ArrowRight: "ArrowLeft"
|
|
131
93
|
};
|
|
132
94
|
var sameKeyMap = {
|
|
133
95
|
Up: "ArrowUp",
|
|
@@ -139,10 +101,9 @@ var sameKeyMap = {
|
|
|
139
101
|
Right: "ArrowRight"
|
|
140
102
|
};
|
|
141
103
|
function getEventKey(event, options = {}) {
|
|
142
|
-
var _a;
|
|
143
104
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
144
105
|
let { key } = event;
|
|
145
|
-
key =
|
|
106
|
+
key = sameKeyMap[key] ?? key;
|
|
146
107
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
147
108
|
if (isRtl && key in rtlKeyMap) {
|
|
148
109
|
key = rtlKeyMap[key];
|
|
@@ -179,8 +140,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
179
140
|
};
|
|
180
141
|
}
|
|
181
142
|
function addPointerEvent(target, event, listener, options) {
|
|
182
|
-
|
|
183
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
143
|
+
const type = getEventName(event) ?? event;
|
|
184
144
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
185
145
|
}
|
|
186
146
|
function wrapHandler(fn, filter = false) {
|
|
@@ -191,8 +151,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
191
151
|
}
|
|
192
152
|
function filterPrimaryPointer(fn) {
|
|
193
153
|
return (event) => {
|
|
194
|
-
|
|
195
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
154
|
+
const win = event.view ?? window;
|
|
196
155
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
197
156
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
198
157
|
if (isPrimary)
|
|
@@ -247,7 +206,7 @@ var state = "default";
|
|
|
247
206
|
var savedUserSelect = "";
|
|
248
207
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
249
208
|
function disableTextSelection({ target, doc } = {}) {
|
|
250
|
-
const _document = doc
|
|
209
|
+
const _document = doc ?? document;
|
|
251
210
|
if (isIos()) {
|
|
252
211
|
if (state === "default") {
|
|
253
212
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -261,7 +220,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
261
220
|
return () => restoreTextSelection({ target, doc: _document });
|
|
262
221
|
}
|
|
263
222
|
function restoreTextSelection({ target, doc } = {}) {
|
|
264
|
-
const _document = doc
|
|
223
|
+
const _document = doc ?? document;
|
|
265
224
|
if (isIos()) {
|
|
266
225
|
if (state !== "disabled")
|
|
267
226
|
return;
|
|
@@ -281,7 +240,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
281
240
|
if (target && modifiedElementMap.has(target)) {
|
|
282
241
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
283
242
|
if (target.style.userSelect === "none") {
|
|
284
|
-
target.style.userSelect = targetOldUserSelect
|
|
243
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
285
244
|
}
|
|
286
245
|
if (target.getAttribute("style") === "") {
|
|
287
246
|
target.removeAttribute("style");
|
|
@@ -290,13 +249,13 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
290
249
|
}
|
|
291
250
|
}
|
|
292
251
|
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
const {
|
|
252
|
+
var THRESHOLD = 5;
|
|
253
|
+
function trackPointerMove(doc, opts) {
|
|
254
|
+
const { onPointerMove, onPointerUp } = opts;
|
|
296
255
|
const handlePointerMove = (event, info) => {
|
|
297
256
|
const { point: p } = info;
|
|
298
|
-
const distance = Math.sqrt(
|
|
299
|
-
if (distance <
|
|
257
|
+
const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
|
|
258
|
+
if (distance < THRESHOLD)
|
|
300
259
|
return;
|
|
301
260
|
if (isMouseEvent(event) && isLeftClick(event)) {
|
|
302
261
|
onPointerUp();
|
|
@@ -304,34 +263,40 @@ function trackPointerMove(opts) {
|
|
|
304
263
|
}
|
|
305
264
|
onPointerMove(info, event);
|
|
306
265
|
};
|
|
307
|
-
return callAll(
|
|
266
|
+
return callAll(
|
|
267
|
+
addPointerEvent(doc, "pointermove", handlePointerMove, false),
|
|
268
|
+
addPointerEvent(doc, "pointerup", onPointerUp, false),
|
|
269
|
+
addPointerEvent(doc, "pointercancel", onPointerUp, false),
|
|
270
|
+
addPointerEvent(doc, "contextmenu", onPointerUp, false),
|
|
271
|
+
disableTextSelection({ doc })
|
|
272
|
+
);
|
|
308
273
|
}
|
|
309
274
|
|
|
310
275
|
// src/splitter.dom.ts
|
|
311
276
|
var dom = defineDomHelpers({
|
|
312
277
|
getRootId: (ctx) => {
|
|
313
|
-
var _a
|
|
314
|
-
return (
|
|
278
|
+
var _a;
|
|
279
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
|
|
315
280
|
},
|
|
316
281
|
getSplitterId: (ctx) => {
|
|
317
|
-
var _a
|
|
318
|
-
return (
|
|
282
|
+
var _a;
|
|
283
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
|
|
319
284
|
},
|
|
320
285
|
getToggleButtonId: (ctx) => {
|
|
321
|
-
var _a
|
|
322
|
-
return (
|
|
286
|
+
var _a;
|
|
287
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
|
|
323
288
|
},
|
|
324
289
|
getLabelId: (ctx) => {
|
|
325
|
-
var _a
|
|
326
|
-
return (
|
|
290
|
+
var _a;
|
|
291
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
|
|
327
292
|
},
|
|
328
293
|
getPrimaryPaneId: (ctx) => {
|
|
329
|
-
var _a
|
|
330
|
-
return (
|
|
294
|
+
var _a;
|
|
295
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
|
|
331
296
|
},
|
|
332
297
|
getSecondaryPaneId: (ctx) => {
|
|
333
|
-
var _a
|
|
334
|
-
return (
|
|
298
|
+
var _a;
|
|
299
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
|
|
335
300
|
},
|
|
336
301
|
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
337
302
|
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
@@ -404,12 +369,13 @@ function connect(state2, send, normalize) {
|
|
|
404
369
|
id: dom.getPrimaryPaneId(state2.context),
|
|
405
370
|
"data-disabled": dataAttr(isDisabled),
|
|
406
371
|
"data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
|
|
407
|
-
style:
|
|
372
|
+
style: {
|
|
408
373
|
visibility: "visible",
|
|
409
374
|
flex: `0 0 ${value}px`,
|
|
410
375
|
position: "relative",
|
|
411
|
-
userSelect: isDragging ? "none" : "auto"
|
|
412
|
-
|
|
376
|
+
userSelect: isDragging ? "none" : "auto",
|
|
377
|
+
...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
|
|
378
|
+
}
|
|
413
379
|
}),
|
|
414
380
|
toggleButtonProps: normalize.element({
|
|
415
381
|
"data-part": "toggle-button",
|
|
@@ -516,10 +482,9 @@ function connect(state2, send, normalize) {
|
|
|
516
482
|
import { createMachine, guards } from "@zag-js/core";
|
|
517
483
|
|
|
518
484
|
// ../../utilities/number/dist/index.mjs
|
|
519
|
-
var __pow2 = Math.pow;
|
|
520
485
|
function round(v, t) {
|
|
521
486
|
let num = valueOf(v);
|
|
522
|
-
const p =
|
|
487
|
+
const p = 10 ** (t ?? 10);
|
|
523
488
|
num = Math.round(num * p) / p;
|
|
524
489
|
return t ? num.toFixed(t) : v.toString();
|
|
525
490
|
}
|
|
@@ -553,7 +518,7 @@ function valueOf(v) {
|
|
|
553
518
|
function decimalOperation(a, op, b) {
|
|
554
519
|
let result = op === "+" ? a + b : a - b;
|
|
555
520
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
556
|
-
const multiplier =
|
|
521
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
557
522
|
a = Math.round(a * multiplier);
|
|
558
523
|
b = Math.round(b * multiplier);
|
|
559
524
|
result = op === "+" ? a + b : a - b;
|
|
@@ -566,213 +531,216 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
|
|
|
566
531
|
// src/splitter.machine.ts
|
|
567
532
|
var { not } = guards;
|
|
568
533
|
function machine(ctx) {
|
|
569
|
-
return createMachine(
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
582
|
-
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
583
|
-
isAtMax: (ctx2) => ctx2.value === ctx2.max
|
|
584
|
-
},
|
|
585
|
-
on: {
|
|
586
|
-
COLLAPSE: {
|
|
587
|
-
actions: "setToMin"
|
|
534
|
+
return createMachine(
|
|
535
|
+
{
|
|
536
|
+
id: "splitter",
|
|
537
|
+
initial: "unknown",
|
|
538
|
+
context: {
|
|
539
|
+
orientation: "horizontal",
|
|
540
|
+
min: 224,
|
|
541
|
+
max: 340,
|
|
542
|
+
step: 1,
|
|
543
|
+
value: 256,
|
|
544
|
+
snapOffset: 0,
|
|
545
|
+
...ctx
|
|
588
546
|
},
|
|
589
|
-
|
|
590
|
-
|
|
547
|
+
computed: {
|
|
548
|
+
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
549
|
+
isAtMin: (ctx2) => ctx2.value === ctx2.min,
|
|
550
|
+
isAtMax: (ctx2) => ctx2.value === ctx2.max
|
|
591
551
|
},
|
|
592
|
-
|
|
593
|
-
{
|
|
594
|
-
|
|
552
|
+
on: {
|
|
553
|
+
COLLAPSE: {
|
|
554
|
+
actions: "setToMin"
|
|
555
|
+
},
|
|
556
|
+
EXPAND: {
|
|
595
557
|
actions: "setToMax"
|
|
596
558
|
},
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
},
|
|
602
|
-
states: {
|
|
603
|
-
unknown: {
|
|
604
|
-
on: {
|
|
605
|
-
SETUP: "idle"
|
|
606
|
-
}
|
|
607
|
-
},
|
|
608
|
-
idle: {
|
|
609
|
-
on: {
|
|
610
|
-
POINTER_OVER: {
|
|
611
|
-
guard: not("isFixed"),
|
|
612
|
-
target: "hover:temp"
|
|
559
|
+
TOGGLE: [
|
|
560
|
+
{
|
|
561
|
+
guard: "isCollapsed",
|
|
562
|
+
actions: "setToMax"
|
|
613
563
|
},
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
564
|
+
{
|
|
565
|
+
actions: "setToMin"
|
|
566
|
+
}
|
|
567
|
+
]
|
|
617
568
|
},
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
569
|
+
states: {
|
|
570
|
+
unknown: {
|
|
571
|
+
on: {
|
|
572
|
+
SETUP: "idle"
|
|
573
|
+
}
|
|
621
574
|
},
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
actions: ["invokeOnChangeStart"]
|
|
636
|
-
},
|
|
637
|
-
POINTER_LEAVE: "idle"
|
|
638
|
-
}
|
|
639
|
-
},
|
|
640
|
-
focused: {
|
|
641
|
-
tags: ["focus"],
|
|
642
|
-
on: {
|
|
643
|
-
BLUR: "idle",
|
|
644
|
-
POINTER_DOWN: {
|
|
645
|
-
target: "dragging",
|
|
646
|
-
actions: ["invokeOnChangeStart"]
|
|
647
|
-
},
|
|
648
|
-
ARROW_LEFT: {
|
|
649
|
-
guard: "isHorizontal",
|
|
650
|
-
actions: "decrement"
|
|
651
|
-
},
|
|
652
|
-
ARROW_RIGHT: {
|
|
653
|
-
guard: "isHorizontal",
|
|
654
|
-
actions: "increment"
|
|
655
|
-
},
|
|
656
|
-
ARROW_UP: {
|
|
657
|
-
guard: "isVertical",
|
|
658
|
-
actions: "increment"
|
|
659
|
-
},
|
|
660
|
-
ARROW_DOWN: {
|
|
661
|
-
guard: "isVertical",
|
|
662
|
-
actions: "decrement"
|
|
575
|
+
idle: {
|
|
576
|
+
on: {
|
|
577
|
+
POINTER_OVER: {
|
|
578
|
+
guard: not("isFixed"),
|
|
579
|
+
target: "hover:temp"
|
|
580
|
+
},
|
|
581
|
+
POINTER_LEAVE: "idle",
|
|
582
|
+
FOCUS: "focused"
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
"hover:temp": {
|
|
586
|
+
after: {
|
|
587
|
+
HOVER_DELAY: "hover"
|
|
663
588
|
},
|
|
664
|
-
|
|
665
|
-
{
|
|
666
|
-
|
|
589
|
+
on: {
|
|
590
|
+
POINTER_DOWN: {
|
|
591
|
+
target: "dragging",
|
|
592
|
+
actions: ["invokeOnChangeStart"]
|
|
593
|
+
},
|
|
594
|
+
POINTER_LEAVE: "idle"
|
|
595
|
+
}
|
|
596
|
+
},
|
|
597
|
+
hover: {
|
|
598
|
+
tags: ["focus"],
|
|
599
|
+
on: {
|
|
600
|
+
POINTER_DOWN: {
|
|
601
|
+
target: "dragging",
|
|
602
|
+
actions: ["invokeOnChangeStart"]
|
|
603
|
+
},
|
|
604
|
+
POINTER_LEAVE: "idle"
|
|
605
|
+
}
|
|
606
|
+
},
|
|
607
|
+
focused: {
|
|
608
|
+
tags: ["focus"],
|
|
609
|
+
on: {
|
|
610
|
+
BLUR: "idle",
|
|
611
|
+
POINTER_DOWN: {
|
|
612
|
+
target: "dragging",
|
|
613
|
+
actions: ["invokeOnChangeStart"]
|
|
614
|
+
},
|
|
615
|
+
ARROW_LEFT: {
|
|
616
|
+
guard: "isHorizontal",
|
|
617
|
+
actions: "decrement"
|
|
618
|
+
},
|
|
619
|
+
ARROW_RIGHT: {
|
|
620
|
+
guard: "isHorizontal",
|
|
621
|
+
actions: "increment"
|
|
622
|
+
},
|
|
623
|
+
ARROW_UP: {
|
|
624
|
+
guard: "isVertical",
|
|
625
|
+
actions: "increment"
|
|
626
|
+
},
|
|
627
|
+
ARROW_DOWN: {
|
|
628
|
+
guard: "isVertical",
|
|
629
|
+
actions: "decrement"
|
|
630
|
+
},
|
|
631
|
+
ENTER: [
|
|
632
|
+
{
|
|
633
|
+
guard: "isCollapsed",
|
|
634
|
+
actions: "setToMin"
|
|
635
|
+
},
|
|
636
|
+
{ actions: "setToMin" }
|
|
637
|
+
],
|
|
638
|
+
HOME: {
|
|
667
639
|
actions: "setToMin"
|
|
668
640
|
},
|
|
669
|
-
|
|
670
|
-
],
|
|
671
|
-
HOME: {
|
|
672
|
-
actions: "setToMin"
|
|
673
|
-
},
|
|
674
|
-
END: {
|
|
675
|
-
actions: "setToMax"
|
|
676
|
-
},
|
|
677
|
-
DOUBLE_CLICK: [
|
|
678
|
-
{
|
|
679
|
-
guard: "isCollapsed",
|
|
641
|
+
END: {
|
|
680
642
|
actions: "setToMax"
|
|
681
643
|
},
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
activities: "trackPointerMove",
|
|
690
|
-
on: {
|
|
691
|
-
POINTER_UP: {
|
|
692
|
-
target: "focused",
|
|
693
|
-
actions: ["invokeOnChangeEnd"]
|
|
694
|
-
},
|
|
695
|
-
POINTER_MOVE: {
|
|
696
|
-
actions: "setPointerValue"
|
|
644
|
+
DOUBLE_CLICK: [
|
|
645
|
+
{
|
|
646
|
+
guard: "isCollapsed",
|
|
647
|
+
actions: "setToMax"
|
|
648
|
+
},
|
|
649
|
+
{ actions: "setToMin" }
|
|
650
|
+
]
|
|
697
651
|
}
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
onPointerUp() {
|
|
712
|
-
send("POINTER_UP");
|
|
713
|
-
el.style.cursor = "";
|
|
652
|
+
},
|
|
653
|
+
dragging: {
|
|
654
|
+
tags: ["focus"],
|
|
655
|
+
entry: "focusSplitter",
|
|
656
|
+
activities: "trackPointerMove",
|
|
657
|
+
on: {
|
|
658
|
+
POINTER_UP: {
|
|
659
|
+
target: "focused",
|
|
660
|
+
actions: ["invokeOnChangeEnd"]
|
|
661
|
+
},
|
|
662
|
+
POINTER_MOVE: {
|
|
663
|
+
actions: "setPointerValue"
|
|
664
|
+
}
|
|
714
665
|
}
|
|
715
|
-
}
|
|
666
|
+
}
|
|
716
667
|
}
|
|
717
668
|
},
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
669
|
+
{
|
|
670
|
+
activities: {
|
|
671
|
+
trackPointerMove: (ctx2, _evt, { send }) => {
|
|
672
|
+
const doc = dom.getDoc(ctx2);
|
|
673
|
+
return trackPointerMove(doc, {
|
|
674
|
+
onPointerMove(info) {
|
|
675
|
+
send({ type: "POINTER_MOVE", point: info.point });
|
|
676
|
+
doc.documentElement.style.cursor = dom.getCursor(ctx2);
|
|
677
|
+
},
|
|
678
|
+
onPointerUp() {
|
|
679
|
+
send("POINTER_UP");
|
|
680
|
+
doc.documentElement.style.cursor = "";
|
|
681
|
+
}
|
|
682
|
+
});
|
|
732
683
|
}
|
|
733
684
|
},
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
var _a;
|
|
740
|
-
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
741
|
-
},
|
|
742
|
-
setToMin(ctx2) {
|
|
743
|
-
ctx2.value = ctx2.min;
|
|
685
|
+
guards: {
|
|
686
|
+
isCollapsed: (ctx2) => ctx2.isAtMin,
|
|
687
|
+
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
688
|
+
isVertical: (ctx2) => !ctx2.isHorizontal,
|
|
689
|
+
isFixed: (ctx2) => !!ctx2.fixed
|
|
744
690
|
},
|
|
745
|
-
|
|
746
|
-
|
|
691
|
+
delays: {
|
|
692
|
+
HOVER_DELAY: 250
|
|
747
693
|
},
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
},
|
|
751
|
-
decrement(ctx2, evt) {
|
|
752
|
-
ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
|
|
753
|
-
},
|
|
754
|
-
focusSplitter(ctx2) {
|
|
755
|
-
raf(() => {
|
|
694
|
+
actions: {
|
|
695
|
+
invokeOnChange(ctx2, evt) {
|
|
756
696
|
var _a;
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
value = ctx2.
|
|
697
|
+
if (evt.type !== "SETUP") {
|
|
698
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
invokeOnChangeStart(ctx2) {
|
|
702
|
+
var _a;
|
|
703
|
+
(_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
704
|
+
},
|
|
705
|
+
invokeOnChangeEnd(ctx2) {
|
|
706
|
+
var _a;
|
|
707
|
+
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
708
|
+
},
|
|
709
|
+
setToMin(ctx2) {
|
|
710
|
+
ctx2.value = ctx2.min;
|
|
711
|
+
},
|
|
712
|
+
setToMax(ctx2) {
|
|
713
|
+
ctx2.value = ctx2.max;
|
|
714
|
+
},
|
|
715
|
+
increment(ctx2, evt) {
|
|
716
|
+
ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
|
|
717
|
+
},
|
|
718
|
+
decrement(ctx2, evt) {
|
|
719
|
+
ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
|
|
720
|
+
},
|
|
721
|
+
focusSplitter(ctx2) {
|
|
722
|
+
raf(() => {
|
|
723
|
+
var _a;
|
|
724
|
+
return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
|
|
725
|
+
});
|
|
726
|
+
},
|
|
727
|
+
setPointerValue(ctx2, evt) {
|
|
728
|
+
const el = dom.getPrimaryPaneEl(ctx2);
|
|
729
|
+
if (!el)
|
|
730
|
+
return;
|
|
731
|
+
const relativePoint = getPointRelativeToNode(evt.point, el);
|
|
732
|
+
let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
|
|
733
|
+
let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
|
|
734
|
+
if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
|
|
735
|
+
value = ctx2.min;
|
|
736
|
+
} else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
|
|
737
|
+
value = ctx2.max;
|
|
738
|
+
}
|
|
739
|
+
ctx2.value = value;
|
|
771
740
|
}
|
|
772
|
-
ctx2.value = value;
|
|
773
741
|
}
|
|
774
742
|
}
|
|
775
|
-
|
|
743
|
+
);
|
|
776
744
|
}
|
|
777
745
|
export {
|
|
778
746
|
connect,
|