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

Update script-terminal-modal.tsx

Browse Source
This commit is contained in:
MacRimi
2025-12-10 23:43:05 +01:00
parent bfc0a2ed57
commit a3497a9d39
1 changed files with 33 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
AppImage/components/script-terminal-modal.tsx
View File

@@ -55,18 +55,14 @@ 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) // vh en lugar de píxeles const [modalHeight, setModalHeight] = useState(600)
const [isResizing, setIsResizing] = useState(false) const [isResizing, setIsResizing] = useState(false)
const resizeHandlersRef = useRef<{ const resizeHandlersRef = useRef<{
handleMouseMove: ((e: MouseEvent) => void) | null handlePointerMove: ((e: PointerEvent) => void) | null
handleMouseUp: (() => void) | null handlePointerUp: (() => void) | null
handleTouchMove: ((e: TouchEvent) => void) | null
handleTouchEnd: (() => void) | null
}>({ }>({
handleMouseMove: null, handlePointerMove: null,
handleMouseUp: null, handlePointerUp: null,
handleTouchMove: null,
handleTouchEnd: null,
}) })
const terminalContainerRef = useRef<HTMLDivElement>(null) const terminalContainerRef = useRef<HTMLDivElement>(null)
@@ -296,23 +292,15 @@ export function ScriptTerminalModal({
termRef.current.dispose() termRef.current.dispose()
termRef.current = null termRef.current = null
} }
if (resizeHandlersRef.current.handleMouseMove) { if (resizeHandlersRef.current.handlePointerMove) {
document.removeEventListener("mousemove", resizeHandlersRef.current.handleMouseMove) document.removeEventListener("pointermove", resizeHandlersRef.current.handlePointerMove)
} }
if (resizeHandlersRef.current.handleMouseUp) { if (resizeHandlersRef.current.handlePointerUp) {
document.removeEventListener("mouseup", resizeHandlersRef.current.handleMouseUp) document.removeEventListener("pointerup", resizeHandlersRef.current.handlePointerUp)
}
if (resizeHandlersRef.current.handleTouchMove) {
document.removeEventListener("touchmove", resizeHandlersRef.current.handleTouchMove)
}
if (resizeHandlersRef.current.handleTouchEnd) {
document.removeEventListener("touchend", resizeHandlersRef.current.handleTouchEnd)
} }
resizeHandlersRef.current = { resizeHandlersRef.current = {
handleMouseMove: null, handlePointerMove: null,
handleMouseUp: null, handlePointerUp: null,
handleTouchMove: null,
handleTouchEnd: null,
} }
sessionIdRef.current = Math.random().toString(36).substring(2, 8) sessionIdRef.current = Math.random().toString(36).substring(2, 8)
@@ -403,22 +391,19 @@ export function ScriptTerminalModal({
onClose() onClose()
} }
const handleResizeStart = (e: React.MouseEvent | React.TouchEvent) => { const handleResizeStart = (e: React.PointerEvent) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
const startY = "touches" in e ? e.touches[0].clientY : e.clientY const startY = e.clientY
const startHeight = modalHeight const startHeight = modalHeight
const handleMove = (moveEvent: MouseEvent | TouchEvent) => { const handleMove = (moveEvent: PointerEvent) => {
moveEvent.preventDefault() moveEvent.preventDefault()
moveEvent.stopPropagation() const currentY = moveEvent.clientY
const currentY = "touches" in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY
const deltaY = currentY - startY const deltaY = currentY - startY
const viewportHeight = window.innerHeight const newHeight = Math.max(300, Math.min(window.innerHeight - 100, startHeight + deltaY))
const deltaVh = (deltaY / viewportHeight) * 100
const newHeight = Math.max(30, Math.min(85, startHeight + deltaVh))
setModalHeight(newHeight) setModalHeight(newHeight)
@@ -439,18 +424,21 @@ export function ScriptTerminalModal({
} }
const handleEnd = () => { const handleEnd = () => {
document.removeEventListener("mousemove", handleMove) document.removeEventListener("pointermove", handleMove)
document.removeEventListener("mouseup", handleEnd) document.removeEventListener("pointerup", handleEnd)
document.removeEventListener("touchmove", handleMove) document.removeEventListener("pointercancel", handleEnd)
document.removeEventListener("touchend", handleEnd)
localStorage.setItem("scriptModalHeight", modalHeight.toString()) localStorage.setItem("scriptModalHeight", modalHeight.toString())
} }
document.addEventListener("mousemove", handleMove) document.addEventListener("pointermove", handleMove)
document.addEventListener("mouseup", handleEnd) document.addEventListener("pointerup", handleEnd)
document.addEventListener("touchmove", handleMove, { passive: false }) document.addEventListener("pointercancel", handleEnd)
document.addEventListener("touchend", handleEnd)
// Capturar el pointer para asegurar que recibimos todos los eventos
if (e.currentTarget instanceof Element) {
e.currentTarget.setPointerCapture(e.pointerId)
}
} }
const sendCommand = (command: string) => { const sendCommand = (command: string) => {
@@ -465,7 +453,7 @@ export function ScriptTerminalModal({
<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={{ style={{
height: isMobile ? "80vh" : `${modalHeight}vh`, height: isMobile || isTablet ? "80vh" : `${modalHeight}px`,
maxHeight: "none", maxHeight: "none",
}} }}
onInteractOutside={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()}
@@ -745,6 +733,11 @@ export function ScriptTerminalModal({
</DialogContent> </DialogContent>
</Dialog> </Dialog>
)} )}
<div
onPointerDown={handleResizeStart}
className="hidden md:flex h-2 cursor-ns-resize items-center justify-center hover:bg-accent transition-colors z-50 pointer-events-auto touch-none"
></div>
</> </>
) )
} }