/** * PaneResizeHandle - Draggable divider between adjacent panes. * Uses the same mouse-event pattern as Sidebar.tsx for resize. */ import { useCallback, useEffect, useState } from 'react'; import { useStore } from '@renderer/store'; interface PaneResizeHandleProps { leftPaneId: string; rightPaneId: string;} export const PaneResizeHandle = ({ leftPaneId }: PaneResizeHandleProps): React.JSX.Element => { const [isResizing, setIsResizing] = useState(false); const resizePanes = useStore((s) => s.resizePanes); const paneLayout = useStore((s) => s.paneLayout); const handleMouseMove = useCallback( (e: MouseEvent) => { if (!isResizing) return; // Calculate the new width fraction based on mouse position relative to container const container = document.getElementById('pane-container'); if (!container) return; const containerRect = container.getBoundingClientRect(); const relativeX = e.clientX - containerRect.left; const newFraction = relativeX / containerRect.width; // Calculate the cumulative width of all panes before the left pane const leftPaneIndex = paneLayout.panes.findIndex((p) => p.id === leftPaneId); if (leftPaneIndex === -1) return; let cumulativeWidth = 0; for (let i = 0; i < leftPaneIndex; i++) { cumulativeWidth += paneLayout.panes[i].widthFraction; } const leftPaneNewWidth = newFraction - cumulativeWidth; resizePanes(leftPaneId, leftPaneNewWidth); }, [isResizing, leftPaneId, paneLayout.panes, resizePanes] ); const handleMouseUp = useCallback(() => { setIsResizing(false); }, []); useEffect(() => { if (isResizing) { document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; } return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); document.body.style.cursor = ''; document.body.style.userSelect = ''; }; }, [isResizing, handleMouseMove, handleMouseUp]); const handleMouseDown = (e: React.MouseEvent): void => { e.preventDefault(); setIsResizing(true); }; return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- resize handle requires mouse interaction <div className={`flex w-1 shrink-0 cursor-col-resize items-center justify-center transition-colors hover:bg-blue-500/50 ${ isResizing ? 'bg-blue-500/50' : '' }`} style={{ backgroundColor: isResizing ? undefined : 'var(--color-border)', }} onMouseDown={handleMouseDown} /> );};
/**
* PaneResizeHandle - Draggable divider between adjacent panes.
* Uses the same mouse-event pattern as Sidebar.tsx for resize.
*/
import { useCallback, useEffect, useState } from 'react';
import { useStore } from '@renderer/store';
interface PaneResizeHandleProps {
leftPaneId: string;
rightPaneId: string;
}
export const PaneResizeHandle = ({ leftPaneId }: PaneResizeHandleProps): React.JSX.Element => {
const [isResizing, setIsResizing] = useState(false);
const resizePanes = useStore((s) => s.resizePanes);
const paneLayout = useStore((s) => s.paneLayout);
const handleMouseMove = useCallback(
(e: MouseEvent) => {
if (!isResizing) return;
// Calculate the new width fraction based on mouse position relative to container
const container = document.getElementById('pane-container');
if (!container) return;
const containerRect = container.getBoundingClientRect();
const relativeX = e.clientX - containerRect.left;
const newFraction = relativeX / containerRect.width;
// Calculate the cumulative width of all panes before the left pane
const leftPaneIndex = paneLayout.panes.findIndex((p) => p.id === leftPaneId);
if (leftPaneIndex === -1) return;
let cumulativeWidth = 0;
for (let i = 0; i < leftPaneIndex; i++) {
cumulativeWidth += paneLayout.panes[i].widthFraction;
}
const leftPaneNewWidth = newFraction - cumulativeWidth;
resizePanes(leftPaneId, leftPaneNewWidth);
},
[isResizing, leftPaneId, paneLayout.panes, resizePanes]
);
const handleMouseUp = useCallback(() => {
setIsResizing(false);
}, []);
useEffect(() => {
if (isResizing) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
};
}, [isResizing, handleMouseMove, handleMouseUp]);
const handleMouseDown = (e: React.MouseEvent): void => {
e.preventDefault();
setIsResizing(true);
};
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions -- resize handle requires mouse interaction
<div
className={`flex w-1 shrink-0 cursor-col-resize items-center justify-center transition-colors hover:bg-blue-500/50 ${
isResizing ? 'bg-blue-500/50' : ''
}`}
style={{
backgroundColor: isResizing ? undefined : 'var(--color-border)',
}}
onMouseDown={handleMouseDown}
/>
);
};