|
600 | 600 | const MAX_WIDTH = 480; |
601 | 601 |
|
602 | 602 | let isResizing = false; |
| 603 | + let activePointerId: number | null = null; |
| 604 | + let activeResizer: HTMLElement | null = null; |
603 | 605 |
|
604 | 606 | let startWidth = 0; |
605 | 607 | let startClientX = 0; |
606 | 608 |
|
607 | | - const resizeStartHandler = (e: MouseEvent) => { |
| 609 | + const resizeStartHandler = (e: PointerEvent) => { |
608 | 610 | if ($mobile) return; |
| 611 | +
|
| 612 | + e.preventDefault(); |
609 | 613 | isResizing = true; |
| 614 | + activePointerId = e.pointerId; |
| 615 | + activeResizer = e.currentTarget as HTMLElement; |
| 616 | + activeResizer.setPointerCapture?.(e.pointerId); |
610 | 617 |
|
611 | 618 | startClientX = e.clientX; |
612 | 619 | startWidth = $sidebarWidth ?? 245; |
613 | 620 |
|
614 | 621 | document.body.style.userSelect = 'none'; |
615 | 622 | }; |
616 | 623 |
|
617 | | - const resizeEndHandler = () => { |
| 624 | + const resizeEndHandler = (e?: PointerEvent) => { |
618 | 625 | if (!isResizing) return; |
| 626 | + if (e && activePointerId !== null && e.pointerId !== activePointerId) return; |
| 627 | +
|
619 | 628 | isResizing = false; |
620 | 629 |
|
| 630 | + if (activePointerId !== null && activeResizer?.hasPointerCapture?.(activePointerId)) { |
| 631 | + activeResizer.releasePointerCapture(activePointerId); |
| 632 | + } |
| 633 | + activePointerId = null; |
| 634 | + activeResizer = null; |
| 635 | +
|
621 | 636 | document.body.style.userSelect = ''; |
622 | 637 | localStorage.setItem('sidebarWidth', String($sidebarWidth)); |
623 | 638 | }; |
624 | 639 |
|
625 | | - const resizeSidebarHandler = (endClientX) => { |
| 640 | + const resizeSidebarHandler = (endClientX: number) => { |
626 | 641 | const dx = endClientX - startClientX; |
627 | 642 | const newSidebarWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + dx)); |
628 | 643 |
|
629 | 644 | sidebarWidth.set(newSidebarWidth); |
630 | 645 | document.documentElement.style.setProperty('--sidebar-width', `${newSidebarWidth}px`); |
631 | 646 | }; |
632 | 647 |
|
| 648 | + onDestroy(() => { |
| 649 | + if (isResizing) { |
| 650 | + document.body.style.userSelect = ''; |
| 651 | + } |
| 652 | + }); |
| 653 | +
|
633 | 654 | onMount(async () => { |
634 | 655 | try { |
635 | 656 | const width = Number(localStorage.getItem('sidebarWidth')); |
|
861 | 882 | /> |
862 | 883 |
|
863 | 884 | <svelte:window |
864 | | - on:mousemove={(e) => { |
| 885 | + on:pointermove={(e) => { |
865 | 886 | if (!isResizing) return; |
| 887 | + if (activePointerId !== null && e.pointerId !== activePointerId) return; |
866 | 888 | resizeSidebarHandler(e.clientX); |
867 | 889 | }} |
868 | | - on:mouseup={() => { |
869 | | - resizeEndHandler(); |
870 | | - }} |
| 890 | + on:pointerup={resizeEndHandler} |
| 891 | + on:pointercancel={resizeEndHandler} |
871 | 892 | /> |
872 | 893 |
|
873 | 894 | <MobileSwipePanel |
|
1726 | 1747 |
|
1727 | 1748 | {#if !$mobile && visible} |
1728 | 1749 | <div |
1729 | | - class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20" |
| 1750 | + class="relative flex items-center justify-center group border-r border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20 bg-transparent p-0 appearance-none" |
1730 | 1751 | id="sidebar-resizer" |
1731 | | - on:mousedown={resizeStartHandler} |
| 1752 | + on:pointerdown={resizeStartHandler} |
1732 | 1753 | role="separator" |
1733 | 1754 | > |
1734 | 1755 | <div |
1735 | 1756 | class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent" |
1736 | | - /> |
| 1757 | + style="touch-action: none;" |
| 1758 | + ></div> |
1737 | 1759 | </div> |
1738 | 1760 | {/if} |
1739 | 1761 | {/if} |
|
0 commit comments