@zag-js/splitter 0.2.6 → 0.2.8
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/dist/chunk-HPRMFGOY.mjs +9 -0
- package/dist/{chunk-F2ZDEPE3.mjs → chunk-IOEWCDUH.mjs} +171 -125
- package/dist/chunk-SQ3UMXCZ.mjs +131 -0
- package/dist/chunk-T56NFB6E.mjs +102 -0
- package/dist/chunk-UC2SKBKO.mjs +209 -0
- package/dist/index.js +470 -322
- package/dist/index.mjs +5 -4
- package/dist/splitter.anatomy.d.ts +2 -2
- package/dist/splitter.anatomy.js +1 -8
- package/dist/splitter.anatomy.mjs +1 -1
- package/dist/splitter.connect.d.ts +19 -13
- package/dist/splitter.connect.js +218 -197
- package/dist/splitter.connect.mjs +4 -3
- package/dist/splitter.dom.d.ts +15 -13
- package/dist/splitter.dom.js +54 -49
- package/dist/splitter.dom.mjs +1 -1
- package/dist/splitter.machine.js +340 -172
- package/dist/splitter.machine.mjs +3 -2
- package/dist/splitter.types.d.ts +50 -78
- package/dist/splitter.utils.d.ts +54 -0
- package/dist/splitter.utils.js +159 -0
- package/dist/splitter.utils.mjs +14 -0
- package/package.json +4 -4
- package/dist/chunk-7IDNY7GP.mjs +0 -217
- package/dist/chunk-A3GF7W2N.mjs +0 -97
- package/dist/chunk-DX6NGFGC.mjs +0 -16
package/dist/splitter.machine.js
CHANGED
|
@@ -90,25 +90,7 @@ function defineDomHelpers(helpers) {
|
|
|
90
90
|
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
91
91
|
},
|
|
92
92
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
93
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
94
|
-
createEmitter: (ctx, target) => {
|
|
95
|
-
const win = dom2.getWin(ctx);
|
|
96
|
-
return function emit(evt, detail, options) {
|
|
97
|
-
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
98
|
-
const eventName = `zag:${evt}`;
|
|
99
|
-
const init = { bubbles, cancelable, composed, detail };
|
|
100
|
-
const event = new win.CustomEvent(eventName, init);
|
|
101
|
-
target.dispatchEvent(event);
|
|
102
|
-
};
|
|
103
|
-
},
|
|
104
|
-
createListener: (target) => {
|
|
105
|
-
return function listen(evt, handler) {
|
|
106
|
-
const eventName = `zag:${evt}`;
|
|
107
|
-
const listener = (e) => handler(e);
|
|
108
|
-
target.addEventListener(eventName, listener);
|
|
109
|
-
return () => target.removeEventListener(eventName, listener);
|
|
110
|
-
};
|
|
111
|
-
}
|
|
93
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
112
94
|
};
|
|
113
95
|
return {
|
|
114
96
|
...dom2,
|
|
@@ -155,6 +137,22 @@ function getPointRelativeToNode(point, element) {
|
|
|
155
137
|
const y = point.y - offset.top;
|
|
156
138
|
return { x, y };
|
|
157
139
|
}
|
|
140
|
+
var clampPercent = (value) => Math.max(0, Math.min(100, value));
|
|
141
|
+
function getPointPercentRelativeToNode(point, element) {
|
|
142
|
+
const relativePoint = getPointRelativeToNode(point, element);
|
|
143
|
+
const x = relativePoint.x / element.offsetWidth * 100;
|
|
144
|
+
const y = relativePoint.y / element.offsetHeight * 100;
|
|
145
|
+
return { x: clampPercent(x), y: clampPercent(y) };
|
|
146
|
+
}
|
|
147
|
+
function normalizePointValue(point, options) {
|
|
148
|
+
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
149
|
+
const { x, y } = point;
|
|
150
|
+
let result = { x, y };
|
|
151
|
+
if (orientation === "horizontal" && dir === "rtl") {
|
|
152
|
+
result = { x: 100 - x, y };
|
|
153
|
+
}
|
|
154
|
+
return orientation === "horizontal" ? result.x : result.y;
|
|
155
|
+
}
|
|
158
156
|
|
|
159
157
|
// ../../utilities/dom/src/listener.ts
|
|
160
158
|
var isRef = (v) => hasProp(v, "current");
|
|
@@ -243,6 +241,12 @@ function raf(fn) {
|
|
|
243
241
|
};
|
|
244
242
|
}
|
|
245
243
|
|
|
244
|
+
// ../../utilities/dom/src/nodelist.ts
|
|
245
|
+
function queryAll(root, selector) {
|
|
246
|
+
var _a;
|
|
247
|
+
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
248
|
+
}
|
|
249
|
+
|
|
246
250
|
// ../../utilities/dom/src/text-selection.ts
|
|
247
251
|
var state = "default";
|
|
248
252
|
var savedUserSelect = "";
|
|
@@ -316,95 +320,189 @@ function trackPointerMove(doc, opts) {
|
|
|
316
320
|
);
|
|
317
321
|
}
|
|
318
322
|
|
|
319
|
-
// ../../utilities/number/src/number.ts
|
|
320
|
-
function round(v, t) {
|
|
321
|
-
let num = valueOf(v);
|
|
322
|
-
const p = 10 ** (t != null ? t : 10);
|
|
323
|
-
num = Math.round(num * p) / p;
|
|
324
|
-
return t ? num.toFixed(t) : v.toString();
|
|
325
|
-
}
|
|
326
|
-
function clamp(v, o) {
|
|
327
|
-
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
328
|
-
}
|
|
329
|
-
function countDecimals(value) {
|
|
330
|
-
if (!Number.isFinite(value))
|
|
331
|
-
return 0;
|
|
332
|
-
let e = 1, p = 0;
|
|
333
|
-
while (Math.round(value * e) / e !== value) {
|
|
334
|
-
e *= 10;
|
|
335
|
-
p += 1;
|
|
336
|
-
}
|
|
337
|
-
return p;
|
|
338
|
-
}
|
|
339
|
-
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
340
|
-
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
341
|
-
function snapToStep(value, step) {
|
|
342
|
-
const num = valueOf(value);
|
|
343
|
-
const p = countDecimals(step);
|
|
344
|
-
const v = Math.round(num / step) * step;
|
|
345
|
-
return round(v, p);
|
|
346
|
-
}
|
|
347
|
-
function valueOf(v) {
|
|
348
|
-
if (typeof v === "number")
|
|
349
|
-
return v;
|
|
350
|
-
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
351
|
-
return !Number.isNaN(num) ? num : 0;
|
|
352
|
-
}
|
|
353
|
-
function decimalOperation(a, op, b) {
|
|
354
|
-
let result = op === "+" ? a + b : a - b;
|
|
355
|
-
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
356
|
-
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
357
|
-
a = Math.round(a * multiplier);
|
|
358
|
-
b = Math.round(b * multiplier);
|
|
359
|
-
result = op === "+" ? a + b : a - b;
|
|
360
|
-
result /= multiplier;
|
|
361
|
-
}
|
|
362
|
-
return result;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
323
|
// src/splitter.dom.ts
|
|
366
324
|
var dom = defineDomHelpers({
|
|
367
|
-
getRootId: (ctx) => {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
var _a, _b;
|
|
377
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
|
|
378
|
-
},
|
|
379
|
-
getLabelId: (ctx) => {
|
|
380
|
-
var _a, _b;
|
|
381
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
|
|
382
|
-
},
|
|
383
|
-
getPrimaryPaneId: (ctx) => {
|
|
384
|
-
var _a, _b;
|
|
385
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
|
|
386
|
-
},
|
|
387
|
-
getSecondaryPaneId: (ctx) => {
|
|
388
|
-
var _a, _b;
|
|
389
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
|
|
390
|
-
},
|
|
391
|
-
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
392
|
-
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
325
|
+
getRootId: (ctx) => `splitter:${ctx.id}`,
|
|
326
|
+
getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
|
|
327
|
+
getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
|
|
328
|
+
getLabelId: (ctx) => `splitter:${ctx.id}:label`,
|
|
329
|
+
getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
|
|
330
|
+
globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
|
|
331
|
+
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
332
|
+
getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
|
|
333
|
+
getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
|
|
393
334
|
getCursor(ctx) {
|
|
394
|
-
if (ctx.disabled || ctx.fixed)
|
|
395
|
-
return "default";
|
|
396
335
|
const x = ctx.isHorizontal;
|
|
397
336
|
let cursor = x ? "col-resize" : "row-resize";
|
|
398
|
-
if (ctx.isAtMin)
|
|
337
|
+
if (ctx.activeResizeState.isAtMin)
|
|
399
338
|
cursor = x ? "e-resize" : "s-resize";
|
|
400
|
-
if (ctx.isAtMax)
|
|
339
|
+
if (ctx.activeResizeState.isAtMax)
|
|
401
340
|
cursor = x ? "w-resize" : "n-resize";
|
|
402
341
|
return cursor;
|
|
342
|
+
},
|
|
343
|
+
getPanelStyle(ctx, id) {
|
|
344
|
+
var _a, _b;
|
|
345
|
+
const flexGrow = (_b = (_a = ctx.panels.find((panel) => panel.id === id)) == null ? void 0 : _a.size) != null ? _b : "0";
|
|
346
|
+
return {
|
|
347
|
+
flexBasis: 0,
|
|
348
|
+
flexGrow,
|
|
349
|
+
flexShrink: 1,
|
|
350
|
+
overflow: "hidden"
|
|
351
|
+
};
|
|
352
|
+
},
|
|
353
|
+
getActiveHandleEl(ctx) {
|
|
354
|
+
const activeId = ctx.activeResizeId;
|
|
355
|
+
if (activeId == null)
|
|
356
|
+
return;
|
|
357
|
+
return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId));
|
|
358
|
+
},
|
|
359
|
+
getResizeTriggerEls(ctx) {
|
|
360
|
+
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
361
|
+
return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
|
|
362
|
+
},
|
|
363
|
+
setupGlobalCursor(ctx) {
|
|
364
|
+
const styleEl = dom.getById(ctx, dom.globalCursorId(ctx));
|
|
365
|
+
const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
|
|
366
|
+
if (styleEl) {
|
|
367
|
+
styleEl.textContent = textContent;
|
|
368
|
+
} else {
|
|
369
|
+
const style = dom.getDoc(ctx).createElement("style");
|
|
370
|
+
style.id = dom.globalCursorId(ctx);
|
|
371
|
+
style.textContent = textContent;
|
|
372
|
+
dom.getDoc(ctx).head.appendChild(style);
|
|
373
|
+
}
|
|
374
|
+
},
|
|
375
|
+
removeGlobalCursor(ctx) {
|
|
376
|
+
var _a;
|
|
377
|
+
(_a = dom.getById(ctx, dom.globalCursorId(ctx))) == null ? void 0 : _a.remove();
|
|
403
378
|
}
|
|
404
379
|
});
|
|
405
380
|
|
|
381
|
+
// src/splitter.utils.ts
|
|
382
|
+
function validateSize(key, size) {
|
|
383
|
+
if (Math.floor(size) > 100) {
|
|
384
|
+
throw new Error(`Total ${key} of panels cannot be greater than 100`);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
function getNormalizedPanels(ctx) {
|
|
388
|
+
let numOfPanelsWithoutSize = 0;
|
|
389
|
+
let totalSize = 0;
|
|
390
|
+
let totalMinSize = 0;
|
|
391
|
+
const panels = ctx.size.map((panel) => {
|
|
392
|
+
var _a, _b;
|
|
393
|
+
const minSize = (_a = panel.minSize) != null ? _a : 10;
|
|
394
|
+
const maxSize = (_b = panel.maxSize) != null ? _b : 100;
|
|
395
|
+
totalMinSize += minSize;
|
|
396
|
+
if (panel.size == null) {
|
|
397
|
+
numOfPanelsWithoutSize++;
|
|
398
|
+
} else {
|
|
399
|
+
totalSize += panel.size;
|
|
400
|
+
}
|
|
401
|
+
return {
|
|
402
|
+
...panel,
|
|
403
|
+
minSize,
|
|
404
|
+
maxSize
|
|
405
|
+
};
|
|
406
|
+
});
|
|
407
|
+
validateSize("minSize", totalMinSize);
|
|
408
|
+
validateSize("size", totalSize);
|
|
409
|
+
let end = 0;
|
|
410
|
+
let remainingSize = 0;
|
|
411
|
+
const result = panels.map((panel) => {
|
|
412
|
+
let start = end;
|
|
413
|
+
if (panel.size != null) {
|
|
414
|
+
end += panel.size;
|
|
415
|
+
remainingSize = panel.size - panel.minSize;
|
|
416
|
+
return {
|
|
417
|
+
...panel,
|
|
418
|
+
start,
|
|
419
|
+
end,
|
|
420
|
+
remainingSize
|
|
421
|
+
};
|
|
422
|
+
}
|
|
423
|
+
const size = (100 - totalSize) / numOfPanelsWithoutSize;
|
|
424
|
+
end += size;
|
|
425
|
+
remainingSize = size - panel.minSize;
|
|
426
|
+
return { ...panel, size, start, end, remainingSize };
|
|
427
|
+
});
|
|
428
|
+
return result;
|
|
429
|
+
}
|
|
430
|
+
function getHandlePanels(ctx, id = ctx.activeResizeId) {
|
|
431
|
+
var _a;
|
|
432
|
+
const [beforeId, afterId] = (_a = id == null ? void 0 : id.split(":")) != null ? _a : [];
|
|
433
|
+
if (!beforeId || !afterId)
|
|
434
|
+
return;
|
|
435
|
+
const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
|
|
436
|
+
const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
|
|
437
|
+
if (beforeIndex === -1 || afterIndex === -1)
|
|
438
|
+
return;
|
|
439
|
+
const before = ctx.previousPanels[beforeIndex];
|
|
440
|
+
const after = ctx.previousPanels[afterIndex];
|
|
441
|
+
return {
|
|
442
|
+
before: {
|
|
443
|
+
...before,
|
|
444
|
+
index: beforeIndex
|
|
445
|
+
},
|
|
446
|
+
after: {
|
|
447
|
+
...after,
|
|
448
|
+
index: afterIndex
|
|
449
|
+
}
|
|
450
|
+
};
|
|
451
|
+
}
|
|
452
|
+
function getHandleBounds(ctx, id = ctx.activeResizeId) {
|
|
453
|
+
const panels = getHandlePanels(ctx, id);
|
|
454
|
+
if (!panels)
|
|
455
|
+
return;
|
|
456
|
+
const { before, after } = panels;
|
|
457
|
+
return {
|
|
458
|
+
min: Math.max(before.start + before.minSize, after.end - after.maxSize),
|
|
459
|
+
max: Math.min(after.end - after.minSize, before.maxSize + before.start)
|
|
460
|
+
};
|
|
461
|
+
}
|
|
462
|
+
function getPanelBounds(ctx, id) {
|
|
463
|
+
const bounds = getHandleBounds(ctx, id);
|
|
464
|
+
const panels = getHandlePanels(ctx, id);
|
|
465
|
+
if (!bounds || !panels)
|
|
466
|
+
return;
|
|
467
|
+
const { before, after } = panels;
|
|
468
|
+
const beforeMin = Math.abs(before.start - bounds.min);
|
|
469
|
+
const afterMin = after.size + (before.size - beforeMin);
|
|
470
|
+
const beforeMax = Math.abs(before.start - bounds.max);
|
|
471
|
+
const afterMax = after.size - (beforeMax - before.size);
|
|
472
|
+
return {
|
|
473
|
+
before: {
|
|
474
|
+
index: before.index,
|
|
475
|
+
min: beforeMin,
|
|
476
|
+
max: beforeMax,
|
|
477
|
+
isAtMin: beforeMin === before.size,
|
|
478
|
+
isAtMax: beforeMax === before.size,
|
|
479
|
+
up(step) {
|
|
480
|
+
return Math.min(before.size + step, beforeMax);
|
|
481
|
+
},
|
|
482
|
+
down(step) {
|
|
483
|
+
return Math.max(before.size - step, beforeMin);
|
|
484
|
+
}
|
|
485
|
+
},
|
|
486
|
+
after: {
|
|
487
|
+
index: after.index,
|
|
488
|
+
min: afterMin,
|
|
489
|
+
max: afterMax,
|
|
490
|
+
isAtMin: afterMin === after.size,
|
|
491
|
+
isAtMax: afterMax === after.size,
|
|
492
|
+
up(step) {
|
|
493
|
+
return Math.min(after.size + step, afterMin);
|
|
494
|
+
},
|
|
495
|
+
down(step) {
|
|
496
|
+
return Math.max(after.size - step, afterMax);
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
};
|
|
500
|
+
}
|
|
501
|
+
function clamp(value, min, max) {
|
|
502
|
+
return Math.min(Math.max(value, min), max);
|
|
503
|
+
}
|
|
504
|
+
|
|
406
505
|
// src/splitter.machine.ts
|
|
407
|
-
var { not } = import_core.guards;
|
|
408
506
|
function machine(userContext) {
|
|
409
507
|
const ctx = compact(userContext);
|
|
410
508
|
return (0, import_core.createMachine)(
|
|
@@ -413,32 +511,38 @@ function machine(userContext) {
|
|
|
413
511
|
initial: "unknown",
|
|
414
512
|
context: {
|
|
415
513
|
orientation: "horizontal",
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
514
|
+
activeResizeId: null,
|
|
515
|
+
previousPanels: [],
|
|
516
|
+
size: [],
|
|
517
|
+
initialSize: [],
|
|
518
|
+
activeResizeState: {
|
|
519
|
+
isAtMin: false,
|
|
520
|
+
isAtMax: false
|
|
521
|
+
},
|
|
421
522
|
...ctx
|
|
422
523
|
},
|
|
524
|
+
created: ["setPreviousPanels", "setInitialSize"],
|
|
525
|
+
watch: {
|
|
526
|
+
size: ["setActiveResizeState"]
|
|
527
|
+
},
|
|
423
528
|
computed: {
|
|
424
529
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
425
|
-
|
|
426
|
-
isAtMax: (ctx2) => ctx2.value === ctx2.max
|
|
530
|
+
panels: (ctx2) => getNormalizedPanels(ctx2)
|
|
427
531
|
},
|
|
428
532
|
on: {
|
|
429
533
|
COLLAPSE: {
|
|
430
|
-
actions: "
|
|
534
|
+
actions: "setStartPanelToMin"
|
|
431
535
|
},
|
|
432
536
|
EXPAND: {
|
|
433
|
-
actions: "
|
|
537
|
+
actions: "setStartPanelToMax"
|
|
434
538
|
},
|
|
435
539
|
TOGGLE: [
|
|
436
540
|
{
|
|
437
|
-
guard: "
|
|
438
|
-
actions: "
|
|
541
|
+
guard: "isStartPanelAtMin",
|
|
542
|
+
actions: "setStartPanelToMax"
|
|
439
543
|
},
|
|
440
544
|
{
|
|
441
|
-
actions: "
|
|
545
|
+
actions: "setStartPanelToMin"
|
|
442
546
|
}
|
|
443
547
|
]
|
|
444
548
|
},
|
|
@@ -449,13 +553,19 @@ function machine(userContext) {
|
|
|
449
553
|
}
|
|
450
554
|
},
|
|
451
555
|
idle: {
|
|
556
|
+
entry: ["clearActiveHandleId"],
|
|
452
557
|
on: {
|
|
453
558
|
POINTER_OVER: {
|
|
454
|
-
|
|
455
|
-
|
|
559
|
+
target: "hover:temp",
|
|
560
|
+
actions: ["setActiveHandleId"]
|
|
561
|
+
},
|
|
562
|
+
FOCUS: {
|
|
563
|
+
target: "focused",
|
|
564
|
+
actions: ["setActiveHandleId"]
|
|
456
565
|
},
|
|
457
|
-
|
|
458
|
-
|
|
566
|
+
DOUBLE_CLICK: {
|
|
567
|
+
actions: ["resetStartPanel", "setPreviousPanels"]
|
|
568
|
+
}
|
|
459
569
|
}
|
|
460
570
|
},
|
|
461
571
|
"hover:temp": {
|
|
@@ -465,7 +575,7 @@ function machine(userContext) {
|
|
|
465
575
|
on: {
|
|
466
576
|
POINTER_DOWN: {
|
|
467
577
|
target: "dragging",
|
|
468
|
-
actions: ["
|
|
578
|
+
actions: ["setActiveHandleId", "invokeOnResizeStart"]
|
|
469
579
|
},
|
|
470
580
|
POINTER_LEAVE: "idle"
|
|
471
581
|
}
|
|
@@ -475,7 +585,7 @@ function machine(userContext) {
|
|
|
475
585
|
on: {
|
|
476
586
|
POINTER_DOWN: {
|
|
477
587
|
target: "dragging",
|
|
478
|
-
actions: ["
|
|
588
|
+
actions: ["invokeOnResizeStart"]
|
|
479
589
|
},
|
|
480
590
|
POINTER_LEAVE: "idle"
|
|
481
591
|
}
|
|
@@ -486,57 +596,50 @@ function machine(userContext) {
|
|
|
486
596
|
BLUR: "idle",
|
|
487
597
|
POINTER_DOWN: {
|
|
488
598
|
target: "dragging",
|
|
489
|
-
actions: ["
|
|
599
|
+
actions: ["setActiveHandleId", "invokeOnResizeStart"]
|
|
490
600
|
},
|
|
491
601
|
ARROW_LEFT: {
|
|
492
602
|
guard: "isHorizontal",
|
|
493
|
-
actions: "
|
|
603
|
+
actions: ["shrinkStartPanel", "setPreviousPanels"]
|
|
494
604
|
},
|
|
495
605
|
ARROW_RIGHT: {
|
|
496
606
|
guard: "isHorizontal",
|
|
497
|
-
actions: "
|
|
607
|
+
actions: ["expandStartPanel", "setPreviousPanels"]
|
|
498
608
|
},
|
|
499
609
|
ARROW_UP: {
|
|
500
610
|
guard: "isVertical",
|
|
501
|
-
actions: "
|
|
611
|
+
actions: ["shrinkStartPanel", "setPreviousPanels"]
|
|
502
612
|
},
|
|
503
613
|
ARROW_DOWN: {
|
|
504
614
|
guard: "isVertical",
|
|
505
|
-
actions: "
|
|
615
|
+
actions: ["expandStartPanel", "setPreviousPanels"]
|
|
506
616
|
},
|
|
507
617
|
ENTER: [
|
|
508
618
|
{
|
|
509
|
-
guard: "
|
|
510
|
-
actions: "
|
|
619
|
+
guard: "isStartPanelAtMax",
|
|
620
|
+
actions: ["setStartPanelToMin", "setPreviousPanels"]
|
|
511
621
|
},
|
|
512
|
-
{ actions: "
|
|
622
|
+
{ actions: ["setStartPanelToMax", "setPreviousPanels"] }
|
|
513
623
|
],
|
|
514
624
|
HOME: {
|
|
515
|
-
actions: "
|
|
625
|
+
actions: ["setStartPanelToMin", "setPreviousPanels"]
|
|
516
626
|
},
|
|
517
627
|
END: {
|
|
518
|
-
actions: "
|
|
519
|
-
}
|
|
520
|
-
DOUBLE_CLICK: [
|
|
521
|
-
{
|
|
522
|
-
guard: "isCollapsed",
|
|
523
|
-
actions: "setToMax"
|
|
524
|
-
},
|
|
525
|
-
{ actions: "setToMin" }
|
|
526
|
-
]
|
|
628
|
+
actions: ["setStartPanelToMax", "setPreviousPanels"]
|
|
629
|
+
}
|
|
527
630
|
}
|
|
528
631
|
},
|
|
529
632
|
dragging: {
|
|
530
633
|
tags: ["focus"],
|
|
531
|
-
entry: "
|
|
532
|
-
activities: "trackPointerMove",
|
|
634
|
+
entry: "focusResizeHandle",
|
|
635
|
+
activities: ["trackPointerMove"],
|
|
533
636
|
on: {
|
|
637
|
+
POINTER_MOVE: {
|
|
638
|
+
actions: ["setPointerValue", "setGlobalCursor"]
|
|
639
|
+
},
|
|
534
640
|
POINTER_UP: {
|
|
535
641
|
target: "focused",
|
|
536
|
-
actions: ["
|
|
537
|
-
},
|
|
538
|
-
POINTER_MOVE: {
|
|
539
|
-
actions: "setPointerValue"
|
|
642
|
+
actions: ["invokeOnResizeEnd", "setPreviousPanels", "clearGlobalCursor", "blurResizeHandle"]
|
|
540
643
|
}
|
|
541
644
|
}
|
|
542
645
|
}
|
|
@@ -549,70 +652,135 @@ function machine(userContext) {
|
|
|
549
652
|
return trackPointerMove(doc, {
|
|
550
653
|
onPointerMove(info) {
|
|
551
654
|
send({ type: "POINTER_MOVE", point: info.point });
|
|
552
|
-
doc.documentElement.style.cursor = dom.getCursor(ctx2);
|
|
553
655
|
},
|
|
554
656
|
onPointerUp() {
|
|
555
657
|
send("POINTER_UP");
|
|
556
|
-
doc.documentElement.style.cursor = "";
|
|
557
658
|
}
|
|
558
659
|
});
|
|
559
660
|
}
|
|
560
661
|
},
|
|
561
662
|
guards: {
|
|
562
|
-
|
|
663
|
+
isStartPanelAtMin: (ctx2) => ctx2.activeResizeState.isAtMin,
|
|
664
|
+
isStartPanelAtMax: (ctx2) => ctx2.activeResizeState.isAtMax,
|
|
563
665
|
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
564
|
-
isVertical: (ctx2) => !ctx2.isHorizontal
|
|
565
|
-
isFixed: (ctx2) => !!ctx2.fixed
|
|
666
|
+
isVertical: (ctx2) => !ctx2.isHorizontal
|
|
566
667
|
},
|
|
567
668
|
delays: {
|
|
568
669
|
HOVER_DELAY: 250
|
|
569
670
|
},
|
|
570
671
|
actions: {
|
|
571
|
-
|
|
672
|
+
setGlobalCursor(ctx2) {
|
|
673
|
+
dom.setupGlobalCursor(ctx2);
|
|
674
|
+
},
|
|
675
|
+
clearGlobalCursor(ctx2) {
|
|
676
|
+
dom.removeGlobalCursor(ctx2);
|
|
677
|
+
},
|
|
678
|
+
invokeOnResize(ctx2) {
|
|
572
679
|
var _a;
|
|
573
|
-
|
|
574
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
575
|
-
}
|
|
680
|
+
(_a = ctx2.onResize) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
|
|
576
681
|
},
|
|
577
|
-
|
|
682
|
+
invokeOnResizeStart(ctx2) {
|
|
578
683
|
var _a;
|
|
579
|
-
(_a = ctx2.
|
|
684
|
+
(_a = ctx2.onResizeStart) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
|
|
580
685
|
},
|
|
581
|
-
|
|
686
|
+
invokeOnResizeEnd(ctx2) {
|
|
582
687
|
var _a;
|
|
583
|
-
(_a = ctx2.
|
|
688
|
+
(_a = ctx2.onResizeEnd) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
|
|
689
|
+
},
|
|
690
|
+
setActiveHandleId(ctx2, evt) {
|
|
691
|
+
ctx2.activeResizeId = evt.id;
|
|
692
|
+
},
|
|
693
|
+
clearActiveHandleId(ctx2) {
|
|
694
|
+
ctx2.activeResizeId = null;
|
|
695
|
+
},
|
|
696
|
+
setInitialSize(ctx2) {
|
|
697
|
+
ctx2.initialSize = ctx2.panels.slice().map((panel) => ({
|
|
698
|
+
id: panel.id,
|
|
699
|
+
size: panel.size
|
|
700
|
+
}));
|
|
701
|
+
},
|
|
702
|
+
setStartPanelToMin(ctx2) {
|
|
703
|
+
const bounds = getPanelBounds(ctx2);
|
|
704
|
+
if (!bounds)
|
|
705
|
+
return;
|
|
706
|
+
const { before, after } = bounds;
|
|
707
|
+
ctx2.size[before.index].size = before.min;
|
|
708
|
+
ctx2.size[after.index].size = after.min;
|
|
584
709
|
},
|
|
585
|
-
|
|
586
|
-
|
|
710
|
+
setStartPanelToMax(ctx2) {
|
|
711
|
+
const bounds = getPanelBounds(ctx2);
|
|
712
|
+
if (!bounds)
|
|
713
|
+
return;
|
|
714
|
+
const { before, after } = bounds;
|
|
715
|
+
ctx2.size[before.index].size = before.max;
|
|
716
|
+
ctx2.size[after.index].size = after.max;
|
|
587
717
|
},
|
|
588
|
-
|
|
589
|
-
|
|
718
|
+
expandStartPanel(ctx2, evt) {
|
|
719
|
+
const bounds = getPanelBounds(ctx2);
|
|
720
|
+
if (!bounds)
|
|
721
|
+
return;
|
|
722
|
+
const { before, after } = bounds;
|
|
723
|
+
ctx2.size[before.index].size = before.up(evt.step);
|
|
724
|
+
ctx2.size[after.index].size = after.down(evt.step);
|
|
590
725
|
},
|
|
591
|
-
|
|
592
|
-
|
|
726
|
+
shrinkStartPanel(ctx2, evt) {
|
|
727
|
+
const bounds = getPanelBounds(ctx2);
|
|
728
|
+
if (!bounds)
|
|
729
|
+
return;
|
|
730
|
+
const { before, after } = bounds;
|
|
731
|
+
ctx2.size[before.index].size = before.down(evt.step);
|
|
732
|
+
ctx2.size[after.index].size = after.up(evt.step);
|
|
593
733
|
},
|
|
594
|
-
|
|
595
|
-
|
|
734
|
+
resetStartPanel(ctx2, evt) {
|
|
735
|
+
const bounds = getPanelBounds(ctx2, evt.id);
|
|
736
|
+
if (!bounds)
|
|
737
|
+
return;
|
|
738
|
+
const { before, after } = bounds;
|
|
739
|
+
ctx2.size[before.index].size = ctx2.initialSize[before.index].size;
|
|
740
|
+
ctx2.size[after.index].size = ctx2.initialSize[after.index].size;
|
|
596
741
|
},
|
|
597
|
-
|
|
742
|
+
focusResizeHandle(ctx2) {
|
|
598
743
|
raf(() => {
|
|
599
744
|
var _a;
|
|
600
|
-
|
|
745
|
+
(_a = dom.getActiveHandleEl(ctx2)) == null ? void 0 : _a.focus();
|
|
601
746
|
});
|
|
602
747
|
},
|
|
748
|
+
blurResizeHandle(ctx2) {
|
|
749
|
+
raf(() => {
|
|
750
|
+
var _a;
|
|
751
|
+
(_a = dom.getActiveHandleEl(ctx2)) == null ? void 0 : _a.blur();
|
|
752
|
+
});
|
|
753
|
+
},
|
|
754
|
+
setPreviousPanels(ctx2) {
|
|
755
|
+
ctx2.previousPanels = ctx2.panels.slice();
|
|
756
|
+
},
|
|
757
|
+
setActiveResizeState(ctx2) {
|
|
758
|
+
const panels = getPanelBounds(ctx2);
|
|
759
|
+
if (!panels)
|
|
760
|
+
return;
|
|
761
|
+
const { before } = panels;
|
|
762
|
+
ctx2.activeResizeState = {
|
|
763
|
+
isAtMin: before.isAtMin,
|
|
764
|
+
isAtMax: before.isAtMax
|
|
765
|
+
};
|
|
766
|
+
},
|
|
603
767
|
setPointerValue(ctx2, evt) {
|
|
604
|
-
const
|
|
605
|
-
|
|
768
|
+
const panels = getHandlePanels(ctx2);
|
|
769
|
+
const bounds = getHandleBounds(ctx2);
|
|
770
|
+
const rootEl = dom.getRootEl(ctx2);
|
|
771
|
+
if (!panels || !rootEl || !bounds)
|
|
606
772
|
return;
|
|
607
|
-
const
|
|
608
|
-
let
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
}
|
|
615
|
-
|
|
773
|
+
const percent = getPointPercentRelativeToNode(evt.point, rootEl);
|
|
774
|
+
let pointValue = normalizePointValue(percent, ctx2);
|
|
775
|
+
ctx2.activeResizeState = {
|
|
776
|
+
isAtMin: pointValue < bounds.min,
|
|
777
|
+
isAtMax: pointValue > bounds.max
|
|
778
|
+
};
|
|
779
|
+
pointValue = clamp(pointValue, bounds.min, bounds.max);
|
|
780
|
+
const { before, after } = panels;
|
|
781
|
+
const offset = pointValue - before.end;
|
|
782
|
+
ctx2.size[before.index].size = before.size + offset;
|
|
783
|
+
ctx2.size[after.index].size = after.size - offset;
|
|
616
784
|
}
|
|
617
785
|
}
|
|
618
786
|
}
|