Update script-terminal-modal.tsx

This commit is contained in:
MacRimi
2025-12-10 23:06:03 +01:00
parent 50df1a2212
commit feeaaa7f2b

View File

@@ -64,7 +64,7 @@ export function ScriptTerminalModal({
const [isWaitingNextInteraction, setIsWaitingNextInteraction] = useState(false) const [isWaitingNextInteraction, setIsWaitingNextInteraction] = useState(false)
const waitingTimeoutRef = useRef<NodeJS.Timeout | null>(null) const waitingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
const [modalHeight, setModalHeight] = useState(60) // Reducido de 80vh a 60vh para que sea visible el header y footer const [modalHeight, setModalHeight] = useState(600) // Restaurado a píxeles como en la versión que funciona
const [isResizing, setIsResizing] = useState(false) const [isResizing, setIsResizing] = useState(false)
const resizeHandlersRef = useRef<{ const resizeHandlersRef = useRef<{
handleMouseMove: ((e: MouseEvent) => void) | null handleMouseMove: ((e: MouseEvent) => void) | null
@@ -416,15 +416,14 @@ export function ScriptTerminalModal({
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
setIsResizing(true)
const startY = "touches" in e ? e.touches[0].clientY : e.clientY const startY = "touches" in e ? e.touches[0].clientY : e.clientY
const startHeight = modalHeight const startHeight = modalHeight
const handleMove = (moveEvent: MouseEvent | TouchEvent) => { const handleMove = (moveEvent: MouseEvent | TouchEvent) => {
moveEvent.preventDefault() // Añadido preventDefault en cada move para mejor soporte táctil
const currentY = "touches" in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY const currentY = "touches" in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY
const deltaY = currentY - startY const deltaY = currentY - startY
const deltaPercent = (deltaY / window.innerHeight) * 100 const newHeight = Math.max(300, Math.min(2400, startHeight + deltaY)) // Restaurado a píxeles con límites razonables
const newHeight = Math.max(30, Math.min(85, startHeight + deltaPercent)) // Cambiado límites a 30vh mínimo y 85vh máximo
setModalHeight(newHeight) setModalHeight(newHeight)
@@ -445,26 +444,9 @@ export function ScriptTerminalModal({
} }
const handleEnd = () => { const handleEnd = () => {
setIsResizing(false)
if (fitAddonRef.current && termRef.current && wsRef.current?.readyState === WebSocket.OPEN) {
setTimeout(() => {
if (fitAddonRef.current && termRef.current) {
fitAddonRef.current.fit()
wsRef.current?.send(
JSON.stringify({
type: "resize",
cols: termRef.current.cols,
rows: termRef.current.rows,
}),
)
}
}, 50)
}
document.removeEventListener("mousemove", handleMove as any) document.removeEventListener("mousemove", handleMove as any)
document.removeEventListener("mouseup", handleEnd) document.removeEventListener("mouseup", handleEnd)
document.removeEventListener("touchmove", handleMove as any, { passive: false } as any) document.removeEventListener("touchmove", handleMove as any)
document.removeEventListener("touchend", handleEnd) document.removeEventListener("touchend", handleEnd)
localStorage.setItem("scriptModalHeight", modalHeight.toString()) localStorage.setItem("scriptModalHeight", modalHeight.toString())
@@ -487,7 +469,7 @@ export function ScriptTerminalModal({
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent <DialogContent
className="max-w-7xl p-0 flex flex-col gap-0 overflow-hidden" className="max-w-7xl p-0 flex flex-col gap-0 overflow-hidden"
style={{ height: isMobile ? "80vh" : `${modalHeight}vh` }} // Cambiado para usar vh en tablet y escritorio style={{ height: isMobile || isTablet ? "80vh" : `${modalHeight}px`, maxHeight: "none" }} // Restaurado: 80vh fijo para móvil/tablet, píxeles para escritorio
onInteractOutside={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()} onEscapeKeyDown={(e) => e.preventDefault()}
hideClose hideClose
@@ -514,18 +496,14 @@ export function ScriptTerminalModal({
)} )}
</div> </div>
{!isMobile && ( {(isTablet || (!isMobile && !isTablet)) && ( // Barra visible en tablet y escritorio
<div <div
className={`h-2 cursor-ns-resize flex items-center justify-center transition-all duration-150 ${
isResizing ? "bg-blue-500 h-3" : "bg-zinc-800 hover:bg-blue-500/50"
}`}
onMouseDown={handleResizeStart} onMouseDown={handleResizeStart}
onTouchStart={handleResizeStart} onTouchStart={handleResizeStart}
className="h-2 w-full cursor-row-resize bg-zinc-800 hover:bg-blue-600 transition-colors flex items-center justify-center group relative"
style={{ touchAction: "none" }} style={{ touchAction: "none" }}
> >
<GripHorizontal <GripHorizontal className="h-4 w-4 text-zinc-600 group-hover:text-white pointer-events-none" />
className={`h-4 w-4 transition-all duration-150 ${isResizing ? "text-white scale-110" : "text-zinc-500"}`}
/>
</div> </div>
)} )}