@zag-js/splitter 0.2.6 → 0.2.7

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.
@@ -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
- var _a, _b;
369
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
370
- },
371
- getSplitterId: (ctx) => {
372
- var _a, _b;
373
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
374
- },
375
- getToggleButtonId: (ctx) => {
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
- min: 224,
417
- max: 340,
418
- step: 1,
419
- value: 256,
420
- snapOffset: 0,
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
- isAtMin: (ctx2) => ctx2.value === ctx2.min,
426
- isAtMax: (ctx2) => ctx2.value === ctx2.max
530
+ panels: (ctx2) => getNormalizedPanels(ctx2)
427
531
  },
428
532
  on: {
429
533
  COLLAPSE: {
430
- actions: "setToMin"
534
+ actions: "setStartPanelToMin"
431
535
  },
432
536
  EXPAND: {
433
- actions: "setToMax"
537
+ actions: "setStartPanelToMax"
434
538
  },
435
539
  TOGGLE: [
436
540
  {
437
- guard: "isCollapsed",
438
- actions: "setToMax"
541
+ guard: "isStartPanelAtMin",
542
+ actions: "setStartPanelToMax"
439
543
  },
440
544
  {
441
- actions: "setToMin"
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
- guard: not("isFixed"),
455
- target: "hover:temp"
559
+ target: "hover:temp",
560
+ actions: ["setActiveHandleId"]
561
+ },
562
+ FOCUS: {
563
+ target: "focused",
564
+ actions: ["setActiveHandleId"]
456
565
  },
457
- POINTER_LEAVE: "idle",
458
- FOCUS: "focused"
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: ["invokeOnChangeStart"]
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: ["invokeOnChangeStart"]
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: ["invokeOnChangeStart"]
599
+ actions: ["setActiveHandleId", "invokeOnResizeStart"]
490
600
  },
491
601
  ARROW_LEFT: {
492
602
  guard: "isHorizontal",
493
- actions: "decrement"
603
+ actions: ["shrinkStartPanel", "setPreviousPanels"]
494
604
  },
495
605
  ARROW_RIGHT: {
496
606
  guard: "isHorizontal",
497
- actions: "increment"
607
+ actions: ["expandStartPanel", "setPreviousPanels"]
498
608
  },
499
609
  ARROW_UP: {
500
610
  guard: "isVertical",
501
- actions: "increment"
611
+ actions: ["shrinkStartPanel", "setPreviousPanels"]
502
612
  },
503
613
  ARROW_DOWN: {
504
614
  guard: "isVertical",
505
- actions: "decrement"
615
+ actions: ["expandStartPanel", "setPreviousPanels"]
506
616
  },
507
617
  ENTER: [
508
618
  {
509
- guard: "isCollapsed",
510
- actions: "setToMin"
619
+ guard: "isStartPanelAtMax",
620
+ actions: ["setStartPanelToMin", "setPreviousPanels"]
511
621
  },
512
- { actions: "setToMin" }
622
+ { actions: ["setStartPanelToMax", "setPreviousPanels"] }
513
623
  ],
514
624
  HOME: {
515
- actions: "setToMin"
625
+ actions: ["setStartPanelToMin", "setPreviousPanels"]
516
626
  },
517
627
  END: {
518
- actions: "setToMax"
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: "focusSplitter",
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: ["invokeOnChangeEnd"]
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
- isCollapsed: (ctx2) => ctx2.isAtMin,
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
- invokeOnChange(ctx2, evt) {
672
+ setGlobalCursor(ctx2) {
673
+ dom.setupGlobalCursor(ctx2);
674
+ },
675
+ clearGlobalCursor(ctx2) {
676
+ dom.removeGlobalCursor(ctx2);
677
+ },
678
+ invokeOnResize(ctx2) {
572
679
  var _a;
573
- if (evt.type !== "SETUP") {
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
- invokeOnChangeStart(ctx2) {
682
+ invokeOnResizeStart(ctx2) {
578
683
  var _a;
579
- (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
684
+ (_a = ctx2.onResizeStart) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
580
685
  },
581
- invokeOnChangeEnd(ctx2) {
686
+ invokeOnResizeEnd(ctx2) {
582
687
  var _a;
583
- (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
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
- setToMin(ctx2) {
586
- ctx2.value = ctx2.min;
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
- setToMax(ctx2) {
589
- ctx2.value = ctx2.max;
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
- increment(ctx2, evt) {
592
- ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
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
- decrement(ctx2, evt) {
595
- ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
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
- focusSplitter(ctx2) {
742
+ focusResizeHandle(ctx2) {
598
743
  raf(() => {
599
744
  var _a;
600
- return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
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 el = dom.getPrimaryPaneEl(ctx2);
605
- if (!el)
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 relativePoint = getPointRelativeToNode(evt.point, el);
608
- let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
609
- let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
610
- if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
611
- value = ctx2.min;
612
- } else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
613
- value = ctx2.max;
614
- }
615
- ctx2.value = value;
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
  }
@@ -1,7 +1,8 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-F2ZDEPE3.mjs";
4
- import "./chunk-A3GF7W2N.mjs";
3
+ } from "./chunk-IOEWCDUH.mjs";
4
+ import "./chunk-T56NFB6E.mjs";
5
+ import "./chunk-SQ3UMXCZ.mjs";
5
6
  export {
6
7
  machine
7
8
  };