Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-12-15 00:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update terminal-panel.tsx

Browse Source
This commit is contained in:
MacRimi
2025-11-24 11:21:50 +01:00
parent 1ba45200ee
commit 2474a6ce01
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
AppImage/components/terminal-panel.tsx
View File

@@ -151,6 +151,13 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
const resizeStartY = useRef<number>(0) const resizeStartY = useRef<number>(0)
const resizeStartHeight = useRef<number>(0) const resizeStartHeight = useRef<number>(0)
const isResizingRef = useRef(false)
const terminalHeightRef = useRef(terminalHeight)
useEffect(() => {
terminalHeightRef.current = terminalHeight
}, [terminalHeight])
useEffect(() => { useEffect(() => {
setIsMobile(window.innerWidth < 768) setIsMobile(window.innerWidth < 768)
const handleResize = () => setIsMobile(window.innerWidth < 768) const handleResize = () => setIsMobile(window.innerWidth < 768)
@@ -168,48 +175,44 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
if (isMobile) return if (isMobile) return
setIsResizing(true) setIsResizing(true)
isResizingRef.current = true
resizeStartY.current = e.clientY resizeStartY.current = e.clientY
resizeStartHeight.current = terminalHeight resizeStartHeight.current = terminalHeight
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
// Deshabilitar selección de texto durante el resize
document.body.style.userSelect = "none" document.body.style.userSelect = "none"
document.body.style.cursor = "ns-resize" document.body.style.cursor = "ns-resize"
}, },
[isMobile, terminalHeight], [isMobile, terminalHeight],
) )
const handleMouseMove = useCallback( const handleMouseMove = useCallback((e: MouseEvent) => {
(e: MouseEvent) => { if (!isResizingRef.current) return
if (!isResizing) return
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
const deltaY = e.clientY - resizeStartY.current const deltaY = e.clientY - resizeStartY.current
const newHeight = Math.max(200, Math.min(1200, resizeStartHeight.current + deltaY)) const newHeight = Math.max(200, Math.min(1200, resizeStartHeight.current + deltaY))
setTerminalHeight(newHeight) setTerminalHeight(newHeight)
}, }, [])
[isResizing],
)
const handleResizeEnd = useCallback(() => { const handleResizeEnd = useCallback(() => {
if (!isResizing) return if (!isResizingRef.current) return
setIsResizing(false) setIsResizing(false)
localStorage.setItem("terminalHeight", terminalHeight.toString()) isResizingRef.current = false
// Restaurar selección de texto y cursor localStorage.setItem("terminalHeight", terminalHeightRef.current.toString())
document.body.style.userSelect = "" document.body.style.userSelect = ""
document.body.style.cursor = "" document.body.style.cursor = ""
}, [isResizing, terminalHeight]) }, [])
useEffect(() => { useEffect(() => {
if (isResizing) { if (isResizing) {
// Agregar capture: true para mejor compatibilidad document.addEventListener("mousemove", handleMouseMove)
document.addEventListener("mousemove", handleMouseMove, { capture: true }) document.addEventListener("mouseup", handleResizeEnd)
document.addEventListener("mouseup", handleResizeEnd, { capture: true })
return () => { return () => {
document.removeEventListener("mousemove", handleMouseMove, { capture: true }) document.removeEventListener("mousemove", handleMouseMove)
document.removeEventListener("mouseup", handleResizeEnd, { capture: true }) document.removeEventListener("mouseup", handleResizeEnd)
} }
} }
}, [isResizing, handleMouseMove, handleResizeEnd]) }, [isResizing, handleMouseMove, handleResizeEnd])