Anto01
a3f18dc377
## Cleanup (v0.5.0) - Delete 102+ orphaned MCP session temp files - Remove build artifacts (htmlcov, dist, __pycache__) - Archive superseded plan docs (RALPH_LOOP V2/V3, CANVAS V3, etc.) - Move debug/analysis scripts from tests/ to tools/analysis/ - Archive redundant NX journals to archive/nx_journals/ - Archive monolithic PROTOCOL.md to docs/archive/ - Update .gitignore with missing patterns - Clean old study files (optimization_log_old.txt, run_optimization_old.py) ## Canvas UX (Phases 7-9) - Phase 7: Resizable panels with localStorage persistence - Left sidebar: 200-400px, Right panel: 280-600px - New useResizablePanel hook and ResizeHandle component - Phase 8: Enable all palette items - All 8 node types now draggable - Singleton logic for model/solver/algorithm/surrogate - Phase 9: Solver configuration - Add SolverEngine type (nxnastran, mscnastran, python, etc.) - Add NastranSolutionType (SOL101-SOL200) - Engine/solution dropdowns in config panel - Python script path support ## Documentation - Update CHANGELOG.md with recent versions - Update docs/00_INDEX.md - Create examples/README.md - Add docs/plans/CANVAS_UX_IMPROVEMENTS.md
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
/**
|
|
* ResizeHandle - Visual drag handle for resizable panels
|
|
*
|
|
* A thin vertical bar that can be dragged to resize panels.
|
|
* Shows visual feedback on hover and during drag.
|
|
*/
|
|
|
|
import { memo } from 'react';
|
|
|
|
interface ResizeHandleProps {
|
|
/** Mouse down handler to start dragging */
|
|
onMouseDown: (e: React.MouseEvent) => void;
|
|
/** Double click handler to reset size */
|
|
onDoubleClick?: () => void;
|
|
/** Whether panel is currently being dragged */
|
|
isDragging?: boolean;
|
|
/** Position of the handle ('left' or 'right' edge of the panel) */
|
|
position?: 'left' | 'right';
|
|
}
|
|
|
|
function ResizeHandleComponent({
|
|
onMouseDown,
|
|
onDoubleClick,
|
|
isDragging = false,
|
|
position = 'right',
|
|
}: ResizeHandleProps) {
|
|
return (
|
|
<div
|
|
className={`
|
|
absolute top-0 bottom-0 w-1 z-30
|
|
cursor-col-resize
|
|
transition-colors duration-150
|
|
${position === 'right' ? 'right-0' : 'left-0'}
|
|
${isDragging
|
|
? 'bg-primary-500'
|
|
: 'bg-transparent hover:bg-primary-500/50'
|
|
}
|
|
`}
|
|
onMouseDown={onMouseDown}
|
|
onDoubleClick={onDoubleClick}
|
|
title="Drag to resize, double-click to reset"
|
|
>
|
|
{/* Wider hit area for easier grabbing */}
|
|
<div
|
|
className={`
|
|
absolute top-0 bottom-0 w-3
|
|
${position === 'right' ? '-left-1' : '-right-1'}
|
|
`}
|
|
/>
|
|
|
|
{/* Visual indicator dots (shown on hover via CSS) */}
|
|
<div className={`
|
|
absolute top-1/2 -translate-y-1/2
|
|
${position === 'right' ? '-left-0.5' : '-right-0.5'}
|
|
flex flex-col gap-1 opacity-0 hover:opacity-100 transition-opacity
|
|
${isDragging ? 'opacity-100' : ''}
|
|
`}>
|
|
<div className="w-1 h-1 rounded-full bg-dark-400" />
|
|
<div className="w-1 h-1 rounded-full bg-dark-400" />
|
|
<div className="w-1 h-1 rounded-full bg-dark-400" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const ResizeHandle = memo(ResizeHandleComponent);
|
|
export default ResizeHandle;
|