terminal dragging refactor

libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+
+export const useDragTerminal = (offsetHeight: number) => {
+    const [isOpen, setIsOpen] = useState(true)
+    const [lastYPosition, setLastYPosition] = useState(0)
+    const [terminalPosition, setTerminalPosition] = useState(offsetHeight)
+    const [isDragging, setIsDragging] = useState(false)
+
+    const handleDraggingStart = (event: React.MouseEvent) => {
+        setLastYPosition(event.clientY)
+        setIsDragging(true)
+    }
+
+    const handleDragging = (event: MouseEvent) => {
+        event.preventDefault()
+
+        if (isDragging) {
+            const mouseYPosition = event.clientY
+            const difference = lastYPosition - mouseYPosition
+            const newTerminalPosition = terminalPosition + difference
+            setTerminalPosition(newTerminalPosition)
+            setLastYPosition(mouseYPosition)
+        }
+    }
+
+    const handleDraggingEnd = () => {
+        if(!isDragging) return
+
+        setIsDragging(false)
+
+        // Check terminal position to determine if it should be open or closed
+        setIsOpen(terminalPosition > offsetHeight)
+    }
+
+    const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        setIsOpen(!isOpen)
+    }
+
+    // Add event listeners for dragging
+    useEffect(() => {
+        document.addEventListener('mousemove', handleDragging)
+        document.addEventListener('mouseup', handleDraggingEnd)
+
+        return () => {
+            document.removeEventListener('mousemove', handleDragging)
+            document.removeEventListener('mouseup', handleDraggingEnd)
+        }
+    }, [handleDragging, handleDraggingEnd])
+
+    // Reset terminal position
+    useEffect(() => {
+        if(!terminalPosition){
+            setTerminalPosition(offsetHeight)
+        }
+    }, [terminalPosition, setTerminalPosition])
+
+    return {
+        isOpen,
+        terminalPosition,
+        isDragging,
+        handleDraggingStart,
+        handleToggleTerminal,
+    }
+}

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -17,6 +17,7 @@ import RenderKnownTransactions from './components/RenderKnownTransactions' // es
 import parse from 'html-react-parser'
 import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
+import { useDragTerminal } from './custom-hooks/useDragTerminal'
 
 /* eslint-disable-next-line */
 export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
@@ -25,13 +26,8 @@ export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const { call, _deps, on, config, event, gistHandler, version } = props.plugin
-  const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
-  // dragable state
-  const [leftHeight, setLeftHeight] = useState<undefined | number>(undefined)
-  const [separatorYPosition, setSeparatorYPosition] = useState<undefined | number>(undefined)
-  const [dragging, setDragging] = useState(false)
 
   const [newstate, dispatch] = useReducer(registerCommandReducer, initialState)
   const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState)
@@ -78,6 +74,30 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   // terminal dragable
   const leftRef = useRef(null)
   const panelRef = useRef(null)
+  const terminalMenu = useRef(null)
+
+  const {
+    isOpen,
+    isDragging,
+    terminalPosition,
+    handleDraggingStart,
+    handleToggleTerminal
+  } = useDragTerminal((terminalMenu.current && terminalMenu.current.offsetHeight) || 0)
+
+  // Check open state
+  useEffect(() => {
+    const resizeValue = isOpen ? [config.get('terminal-top-offset')] : []
+    event.trigger('resize', resizeValue)
+  }, [isOpen])
+
+  useEffect(() => {
+    leftRef.current.style.backgroundColor = isDragging ? '#007AA6' : ''
+    leftRef.current.style.border = isDragging ? '2px solid #007AA6' : ''
+  }, [isDragging])
+
+  useEffect(() => {
+    event.trigger('resize', [terminalPosition + 32])
+  } , [terminalPosition])
 
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
@@ -193,18 +213,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
-  const handleMinimizeTerminal = (e) => {
+
-    e.preventDefault()
+
-    e.stopPropagation()
-    if (toggleDownUp === 'fa-angle-double-down') {
-      setToggleDownUp('fa-angle-double-up')
-      event.trigger('resize', [])
-    } else {
-      const terminalTopOffset = config.get('terminal-top-offset')
-      event.trigger('resize', [terminalTopOffset])
-      setToggleDownUp('fa-angle-double-down')
-    }
-  }
 
   const focusinput = () => {
     inputEl.current.focus()
@@ -277,51 +287,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
-  /* start of mouse events */
-
-  const mousedown = (event: MouseEvent) => {
-    setSeparatorYPosition(event.clientY)
-    setDragging(true)
-  }
-
-  const onMouseMove: any = (e: MouseEvent) => {
-    e.preventDefault()
-    if (dragging && leftHeight && separatorYPosition) {
-      const newLeftHeight = leftHeight + separatorYPosition - e.clientY
-      setSeparatorYPosition(e.clientY)
-      setLeftHeight(newLeftHeight)
-      event.trigger('resize', [newLeftHeight + 32])
-    }
-  }
-
-  const onMouseUp = () => {
-    leftRef.current.style.backgroundColor = ''
-    leftRef.current.style.border = ''
-    setDragging(false)
-  }
-
-  /* end of mouse event */
-
-  useEffect(() => {
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
-
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup', onMouseUp)
-    }
-  }, [onMouseMove, onMouseUp])
-
-  React.useEffect(() => {
-    if (panelRef) {
-      if (!leftHeight) {
-        setLeftHeight(panelRef.current.offsetHeight)
-        return
-      }
-      panelRef.current.style.height = `${leftHeight}px`
-    }
-  }, [leftHeight, setLeftHeight, panelRef])
-
   /* block contents that gets rendered from scriptRunner */
 
   const _blocksRenderer = (mode) => {
@@ -463,9 +428,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
-        <div className="dragbarHorizontal" onMouseDown={mousedown} ref={leftRef}></div>
+        <div className="dragbarHorizontal" onMouseDown={handleDraggingStart} ref={leftRef}></div>
-        <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
+        <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
-          <i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
+          <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >
             <i className="fas fa-ban" aria-hidden="true" title="Clear console"
             ></i>