diff --git a/src/components/LogDock.jsx b/src/components/LogDock.jsx index 08a5c6e..efb7d5b 100644 --- a/src/components/LogDock.jsx +++ b/src/components/LogDock.jsx @@ -1,21 +1,73 @@ -// components/LogDock.jsx -import React from 'react'; +import React, { useEffect, useRef, useState, useCallback } from 'react'; export default function LogDock({ open, onClose, lines, progress }) { - if (!open) return null; // don’t render if it's closed + const [height, setHeight] = useState(0.3 * window.innerHeight); + const startYRef = useRef(0); + const startHRef = useRef(height); + const resizingRef = useRef(false); + + // to ensure the height is within bounds if window is resized + useEffect(() => { + const onResize = () => { + const maxH = Math.round(window.innerHeight * 0.9); + setHeight((h) => Math.min(Math.max(h, 120), maxH)); + }; + window.addEventListener('resize', onResize); + return () => window.removeEventListener('resize', onResize); + }, []); + + const onMouseMove = useCallback((e) => { + if (!resizingRef.current) return; + const dy = startYRef.current - e.clientY; // dragging up increases height + const next = Math.round(startHRef.current + dy); + const minH = 120; + const maxH = Math.round(window.innerHeight * 0.9); + setHeight(Math.min(Math.max(next, minH), maxH)); + }, []); + + const stopResizing = useCallback(() => { + resizingRef.current = false; + window.removeEventListener('mousemove', onMouseMove); + window.removeEventListener('mouseup', stopResizing); + }, [onMouseMove]); + + const onMouseDownHandle = (e) => { + resizingRef.current = true; + startYRef.current = e.clientY; + startHRef.current = height; + window.addEventListener('mousemove', onMouseMove); + window.addEventListener('mouseup', stopResizing); + }; + + if (!open) return null; return ( -
+
+ {/* Drag handle */} +
{/* Header */}
Simulation Logs