refac

src/lib/components/common/ResizableSidePanel.svelte

@@ -15,6 +15,8 @@
 
 	let panelElement: HTMLDivElement | null = null;
 	let isResizing = false;
+	let activePointerId: number | null = null;
+	let activeResizer: HTMLElement | null = null;
 	let startClientX = 0;
 	let startWidth = 0;
 
@@ -48,19 +50,31 @@
 		onClose();
 	};
 
-	const resizeStartHandler = (e: MouseEvent) => {
+	const resizeStartHandler = (e: PointerEvent) => {
 		if (!open) return;
 
+		e.preventDefault();
 		isResizing = true;
+		activePointerId = e.pointerId;
+		activeResizer = e.currentTarget as HTMLElement;
+		activeResizer.setPointerCapture?.(e.pointerId);
 		startClientX = e.clientX;
 		startWidth = width;
 		document.body.style.userSelect = 'none';
 	};
 
-	const resizeEndHandler = () => {
+	const resizeEndHandler = (e?: PointerEvent) => {
 		if (!isResizing) return;
+		if (e && activePointerId !== null && e.pointerId !== activePointerId) return;
 
 		isResizing = false;
+		if (activePointerId !== null) {
+			if (activeResizer?.hasPointerCapture?.(activePointerId)) {
+				activeResizer.releasePointerCapture(activePointerId);
+			}
+		}
+		activePointerId = null;
+		activeResizer = null;
 		document.body.style.userSelect = '';
 		persistWidth();
 	};
@@ -109,14 +123,16 @@
 </script>
 
 <svelte:window
-	on:mousemove={(e) => {
+	on:pointermove={(e) => {
 		if (!isResizing) return;
+		if (activePointerId !== null && e.pointerId !== activePointerId) return;
 		resizeHandler(e.clientX);
 	}}
 	on:resize={() => {
 		if (open) width = clamp(width);
 	}}
-	on:mouseup={resizeEndHandler}
+	on:pointerup={resizeEndHandler}
+	on:pointercancel={resizeEndHandler}
 />
 
 {#if open}
@@ -125,7 +141,7 @@
 		<div
 			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 bg-transparent p-0 appearance-none"
 			id={resizerId}
-			on:mousedown={resizeStartHandler}
+			on:pointerdown={resizeStartHandler}
 			on:keydown={resizeKeyHandler}
 			role="separator"
 			tabindex="0"
@@ -134,6 +150,7 @@
 		>
 			<span
 				class="absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				style="touch-action: none;"
 			></span>
 		</div>
 	{/if}
@@ -147,7 +164,7 @@
 		<div
 			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"
 			id={resizerId}
-			on:mousedown={resizeStartHandler}
+			on:pointerdown={resizeStartHandler}
 			on:keydown={resizeKeyHandler}
 			role="separator"
 			tabindex="0"
@@ -156,6 +173,7 @@
 		>
 			<span
 				class="absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				style="touch-action: none;"
 			></span>
 		</div>
 	{/if}