diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx index 69139cd..ce9ac0a 100644 --- a/src/components/editor/Editor.tsx +++ b/src/components/editor/Editor.tsx @@ -139,6 +139,8 @@ export const Editor: React.FC = ({ query, onChange, startDate, endD const tableNameRef = useRef(tableName || ''); const [editorHeight, setEditorHeight] = useState("250px"); const lastMousePosition = useRef({ x: 0, y: 0 }); + const containerRef = useRef(null); + const isDraggingRef = useRef(false); useEffect(() => { tableDefinitionsRef.current = tableDefinitions || []; @@ -561,8 +563,41 @@ export const Editor: React.FC = ({ query, onChange, startDate, endD } }; + const handleMouseDown = (e: React.MouseEvent) => { + isDraggingRef.current = true; + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); + }; + + const handleMouseMove = useCallback((e: MouseEvent) => { + if (!isDraggingRef.current || !containerRef.current) { + return; + } + const containerRect = containerRef.current.getBoundingClientRect(); + const newHeight = Math.max(150, e.clientY - containerRect.top); + setEditorHeight(`${newHeight}px`); + + // Trigger Monaco editor layout update + if (editorRef.current) { + editorRef.current.layout(); + } + }, []); + + const handleMouseUp = useCallback(() => { + isDraggingRef.current = false; + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + }, [handleMouseMove]); + + useEffect(() => { + return () => { + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + }; + }, [handleMouseMove, handleMouseUp]); + return ( -
+
= ({ query, onChange, startDate, endD onChange={handleChange} onMount={handleEditorDidMount} /> - +
); }; diff --git a/src/components/styles/main.css b/src/components/styles/main.css index f7d4394..74b3a90 100644 --- a/src/components/styles/main.css +++ b/src/components/styles/main.css @@ -326,4 +326,58 @@ background: url('data:image/svg+xml;utf8,') center center no-repeat; cursor: pointer; background-size: 12px; +} + +.resize-handle { + position: absolute; + bottom: 0; + right: 0; + width: 16px; + height: 16px; + cursor: se-resize; + display: flex; + align-items: flex-end; + justify-content: flex-end; +} + +.resize-handle::after { + content: ''; + display: block; + width: 10px; + height: 10px; + background-image: linear-gradient( + 135deg, + transparent 0%, + transparent 20%, + rgba(204, 204, 220, 0.3) 20%, + rgba(204, 204, 220, 0.3) 40%, + transparent 40%, + transparent 60%, + rgba(204, 204, 220, 0.3) 60%, + rgba(204, 204, 220, 0.3) 80%, + transparent 80%, + transparent 100% + ); + transition: all 0.2s ease; +} + +.resize-handle:hover::after { + background-image: linear-gradient( + 135deg, + transparent 0%, + transparent 20%, + rgba(204, 204, 220, 0.6) 20%, + rgba(204, 204, 220, 0.6) 40%, + transparent 40%, + transparent 60%, + rgba(204, 204, 220, 0.6) 60%, + rgba(204, 204, 220, 0.6) 80%, + transparent 80%, + transparent 100% + ); +} + +/* Remove the hover state since we want it always visible */ +.EditorContainer:hover .resize-handle { + opacity: 1; } \ No newline at end of file