fixed resizing of the terminal

apps/remix-ide/src/app.js

@@ -299,7 +299,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
         newpos = (newpos < height - limitDown) ? newpos : height - limitDown
         return height - newpos
       }
-    }
+    },
+    { config: registry.get('config').api }
   )
   makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
 

apps/remix-ide/src/app/components/main-panel.js

@@ -31,7 +31,7 @@ export class MainPanel extends AbstractPanel {
 
   render () {
     return yo`
-      <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer">
+      <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
         ${this.view}
       </div>`
   }

apps/remix-ide/src/app/panels/terminal.js

@@ -31,7 +31,7 @@ const profile = {
 }
 
 class Terminal extends Plugin {
-  constructor (opts, api) {
+  constructor (opts, api, config) {
     super(profile)
     this.element = document.createElement('div')
     this.element.setAttribute('class', 'panel_2A0YE0')
@@ -40,6 +40,7 @@ class Terminal extends Plugin {
     this.blockchain = opts.blockchain
     this._api = api
     this._opts = opts
+    this.config = config
     this.version = packageJson.version
     this.data = {
       lineLength: opts.lineLength || 80, // ????
@@ -113,6 +114,7 @@ class Terminal extends Plugin {
   }
 
   renderComponent () {
+
     ReactDOM.render(
       <RemixUiTerminal
         event = {this.event}
@@ -126,6 +128,7 @@ class Terminal extends Plugin {
         registerCommand = {this.registerCommand}
         command = {this.commands}
         version = {this.version}
+        config = {this.config}
       />,
       this.element
     )

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -186,7 +186,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                 row = location.start.line
                 column = location.start.column
                 locationString = row + 1 + ':' + column + ':'
-                fileName = Object.keys(lastCompilationResult.sources)[file]
+                fileName = Object.keys(lastCompilationResult.contracts)[file]
               }
               warningCount++
               const msg = message(item.name, item.warning, item.more, fileName, locationString)

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

@@ -120,7 +120,7 @@ element.style {
     height            : 0.5em;
     right             : 0;
     left              : 0;
-    cursor            : ns-resize;
+    cursor            : row-resize;
     z-index           : 999;
   }
   .listenOnNetwork {
@@ -134,4 +134,16 @@ element.style {
     z-index           : 9999;
     left              : 0;
     right             : 0;
-  }
+  }
+
+
+  .divider-hitbox {
+    color: white;
+    cursor: row-resize;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .ul {margin-left: 0; padding-left: 20px;}

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

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef, SyntheticEvent } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line
-import { useKeyPress } from './custom-hooks/useKeyPress'
+import { useKeyPress } from './custom-hooks/useKeyPress' // eslint-disable-line
 import { useWindowResize } from 'beautiful-react-hooks'
 
 import './remix-ui-terminal.css'
@@ -18,6 +18,7 @@ export interface RemixUiTerminalProps {
   registerCommand: any
   command: any
   version: any
+  config: any
 
   // blockRenderHtml: any
   // blockRenderLog: any
@@ -38,6 +39,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const [_cmdTemp, setCmdTemp] = useState('')
   const [_cmdHistory, setCmdHistory] = useState([])
   const [windowHeight, setWindowHeight] = useState(window.innerHeight)
+  // dragable state
+  const [leftHeight, setLeftHeight] = useState<undefined | number>(undefined)
+  const [separatorYPosition, setSeparatorYPosition] = useState<undefined | number>(undefined)
+  const [dragging, setDragging] = useState(false)
 
   const [state, setState] = useState({
     journalBlocks: {
@@ -93,7 +98,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     setWindowHeight(window.innerHeight)
   })
 
-
   // terminal inputRef
   const inputEl = useRef(null)
   // events
@@ -147,11 +151,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       setToggleDownUp('fa-angle-double-up')
       props.event.trigger('resize', [])
     } else {
-      console.log('clikced up')
+      const terminalTopOffset = props.config.config.get('terminal-top-offset')
-      props.event.trigger('resize', [118])
+      props.event.trigger('resize', [terminalTopOffset])
       setToggleDownUp('fa-angle-double-down')
     }
-    console.log(props.event, 'event.trigger')
   }
 
   // const reattached = (event) => {
@@ -277,6 +280,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
     if (event.which === 13) {
       if (event.ctrlKey) { // <ctrl+enter>
+        console.log(event.which === 32, ' enter key')
         // on enter, append the value in the cli input to the journal
         // setState(prevState => ({...prevState.journalBlocks, prevState: inputEl})
         inputEl.current.innerText += '\n'
@@ -284,17 +288,17 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         // putCursor2End(inputEl.current)
         // scroll2botton () function not implemented
         props.autoCompletePopup.removeAutoComplete()
-      } else {
+      } else { // <enter>
         setCmdIndex(-1)
         setCmdTemp('')
         const script = inputEl.current.innerText.trim()
-        console.log({ script })
+        console.log({ script }, ' script ')
-        inputEl.current.innerText += '\n'
+        // inputEl.current.innerText += '\n'
-        if (script.length) {
+        // if (script.length) {
-          // self._cmdHistory.unshift(script)
+        //   // self._cmdHistory.unshift(script)
-          props.command.script(wrapScript(script))
+        //   props.command.script(wrapScript(script))
-        }
+        // }
-        props.autoCompletePopup.removeAutoComplete()
+        // props.autoCompletePopup.removeAutoComplete()
       }
     } else if (event.which === 38) { // <arrowUp>
       const len = _cmdHistory.length
@@ -332,31 +336,93 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       console.log('remove event')
       setToggleDownUp('fa-angle-double-down')
     }
-    props.event.trigger('resize', [props.api.getPostion(event)])
+    const value = props.event.get('resize')
+    console.log({ value })
+    props.event.trigger('resize', [value])
   }
 
-  const mousedown = (event) => {
+  /* start of mouse events */
-    console.log({ windowHeight })
+
-    console.log(event.which === 1, 'event.which === 1')
+  const mousedown = (event: MouseEvent) => {
-    event.preventDefault()
+    setSeparatorYPosition(event.clientY)
-    moveGhostbar(event)
+    setDragging(true)
-    if (event.which === 1) {
+    // console.log({ windowHeight })
-      console.log('event .which code 1')
+    // console.log(event.which === 1, 'event.which === 1')
-      moveGhostbar(event)
+    // event.preventDefault()
+    // moveGhostbar(event)
+    // if (event.which === 1) {
+    //   console.log('event .which code 1')
+    //   moveGhostbar(event)
+    // }
+  }
+
+  const onMouseMove: any = (e: MouseEvent) => {
+    e.preventDefault()
+    if (dragging && leftHeight && separatorYPosition) {
+      const newEditorHeight = leftHeight - e.clientY + separatorYPosition
+      const newLeftHeight = leftHeight + separatorYPosition - e.clientY
+      setSeparatorYPosition(e.clientY)
+
+      // if (newLeftHeight < MIN_HEIGHT) {
+      //   setLeftHeight(MIN_HEIGHT)
+      //   return
+      // }
+      // if (splitPaneRef.current) {
+      //   const splitPaneHeight = splitPaneRef.current.clientHeight
+
+      //   if (newLeftHeight > splitPaneHeight - MIN_HEIGHT) {
+      //     setLeftHeight(splitPaneHeight - MIN_HEIGHT)
+      //     return
+      //   }
+      // }
+      setLeftHeight(newLeftHeight)
+      props.event.trigger('resize', [newLeftHeight + 32])
+      console.log({ newLeftHeight })
     }
   }
 
+  const onMouseUp = () => {
+    setDragging(false)
+  }
+
+
+  /* end of mouse event */
+
   const cancelGhostbar = (event) => {
     if (event.keyCode === 27) {
       console.log('event .key code 27')
     }
   }
 
+  useEffect(() => {
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+  })
+
+  React.useEffect(() => {
+    const leftRef = document.getElementById('terminal-view')
+    const editorRef = document.getElementById('mainPanelPluginsContainer-id')
+    if (leftRef) {
+      if (!leftHeight) {
+        setLeftHeight(leftRef.offsetHeight)
+        return
+      }
+
+      leftRef.style.height = `${leftHeight}px`
+    }
+  }, [leftHeight, setLeftHeight])
+
   return (
     <div style={{ height: '323px' }} className='panel_2A0YE0'>
+      {console.log({ props })}
       <div className="bar_2A0YE0">
         {/* ${self._view.dragbar} */}
-        <div className="dragbarHorizontal_2A0YE0" onMouseDown={mousedown}></div>
+        <div className="dragbarHorizontal" onMouseDown={mousedown}></div>
         <div className="menu_2A0YE0 border-top border-dark bg-light" data-id="terminalToggleMenu">
           {/* ${self._view.icon} */}
           <i className={`mx-2 toggleTerminal_2A0YE0 fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
@@ -400,7 +466,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       <div tabIndex={-1} className="terminal_container_2A0YE0" data-id="terminalContainer" >
         {/* onScroll=${throttle(reattach, 10)} onkeydown=${focusinput} */}
         {/* {props.autoCompletePopup.render()} */}
-        {console.log({ props })}
         <div data-id="terminalContainerDisplay" style = {{
           position: 'absolute',
           height: '100',
@@ -425,8 +490,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
             </div>
           </div>
           <div id="terminalCli" data-id="terminalCli" className="cli_2A0YE0" onClick={focusinput}>
-            <span className="prompt">{'>'}</span>
+            <span className="prompt_2A0YE0">{'>'}</span>
-            <span className="input" ref={inputEl} spellCheck="false" contentEditable="true" id="terminalCliInput" data-id="terminalCliInput" onPaste={handlePaste} onKeyDown={ handleKeyDown }></span>
+            <span className="input_2A0YE0" ref={inputEl} spellCheck="false" contentEditable="true" id="terminalCliInput" data-id="terminalCliInput" onPaste={handlePaste} onKeyDown={ handleKeyDown }></span>
           </div>
         </div>
       </div>