Merge pull request #1766 from Josel95/terminal-dragbar

fix terminal dragbar
pull/1848/head
David Disu 3 years ago committed by GitHub
commit 3b500ceb71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 77
      libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
  2. 5
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
  3. 93
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@ -0,0 +1,77 @@
import { useEffect, useState } from 'react'
export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
const [lastYPosition, setLastYPosition] = useState(0)
const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
// Used to save position of the terminal when it is closed
const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
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 > minHeight)
}
const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault()
event.stopPropagation()
if(isOpen) {
setLastTerminalPosition(terminalPosition)
setLastYPosition(0)
setTerminalPosition(minHeight)
} else {
setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
}
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(defaultPosition)
}
}, [terminalPosition, setTerminalPosition])
return {
isOpen,
terminalPosition,
isDragging,
handleDraggingStart,
handleToggleTerminal,
}
}

@ -151,6 +151,11 @@ element.style {
cursor : row-resize;
z-index : 999;
}
.dragbarDragging {
background-color: var(--primary);
border: 2px solid var(--primary);
}
.console {
cursor : pointer;

@ -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,28 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
// terminal dragable
const leftRef = useRef(null)
const panelRef = useRef(null)
const terminalMenu = useRef(null)
const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
const terminalDefaultPosition = config.get('terminal-top-offset')
const {
isOpen,
isDragging,
terminalPosition,
handleDraggingStart,
handleToggleTerminal
} = useDragTerminal(terminalMenuOffsetHeight, terminalDefaultPosition)
// Check open state
useEffect(() => {
const resizeValue = isOpen ? [config.get('terminal-top-offset')] : []
event.trigger('resize', resizeValue)
}, [isOpen])
useEffect(() => {
event.trigger('resize', [terminalPosition])
} , [terminalPosition])
const scrollToBottom = () => {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
@ -193,18 +211,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 +285,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 +426,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="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
<i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
<div className={`dragbarHorizontal ${isDragging ? 'dragbarDragging' : ''}`} onMouseDown={handleDraggingStart} ref={leftRef}></div>
<div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
<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>

Loading…
Cancel
Save