From 02714271f5ac1b43a6f13edfda2b4a93d3df2797 Mon Sep 17 00:00:00 2001 From: "davidzagi93@gmail.com" Date: Mon, 19 Jul 2021 03:52:45 +0100 Subject: [PATCH] fixed resizing of the terminal --- apps/remix-ide/src/app.js | 3 +- .../src/app/components/main-panel.js | 2 +- apps/remix-ide/src/app/panels/terminal.js | 5 +- .../src/lib/remix-ui-static-analyser.tsx | 2 +- .../terminal/src/lib/remix-ui-terminal.css | 16 ++- .../terminal/src/lib/remix-ui-terminal.tsx | 119 ++++++++++++++---- 6 files changed, 114 insertions(+), 33 deletions(-) diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index da6aaaf976..e7e27c7887 100644 --- a/apps/remix-ide/src/app.js +++ b/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)) diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js index 62d76cf4c3..66e6a50245 100644 --- a/apps/remix-ide/src/app/components/main-panel.js +++ b/apps/remix-ide/src/app/components/main-panel.js @@ -31,7 +31,7 @@ export class MainPanel extends AbstractPanel { render () { return yo` -
+
${this.view}
` } diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index f7e1e9d137..95bca9da9a 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/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( , this.element ) diff --git a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx index ace945e95e..612e1521f6 100644 --- a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx +++ b/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) diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css index 818fd1bb4a..7bd2a9f90d 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css +++ b/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; - } \ No newline at end of file + } + + + .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;} \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index e4acaa6caf..185ab2843f 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/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 { useKeyPress } from './custom-hooks/useKeyPress' +import React, { useState, useEffect, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line +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) + const [separatorYPosition, setSeparatorYPosition] = useState(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') - props.event.trigger('resize', [118]) + const terminalTopOffset = props.config.config.get('terminal-top-offset') + 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) { // + 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 { // setCmdIndex(-1) setCmdTemp('') const script = inputEl.current.innerText.trim() - console.log({ script }) - inputEl.current.innerText += '\n' - if (script.length) { - // self._cmdHistory.unshift(script) - props.command.script(wrapScript(script)) - } - props.autoCompletePopup.removeAutoComplete() + console.log({ script }, ' script ') + // inputEl.current.innerText += '\n' + // if (script.length) { + // // self._cmdHistory.unshift(script) + // props.command.script(wrapScript(script)) + // } + // props.autoCompletePopup.removeAutoComplete() } } else if (event.which === 38) { // 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) => { - console.log({ windowHeight }) - console.log(event.which === 1, 'event.which === 1') - event.preventDefault() - moveGhostbar(event) - if (event.which === 1) { - console.log('event .which code 1') - moveGhostbar(event) + /* start of mouse events */ + + const mousedown = (event: MouseEvent) => { + setSeparatorYPosition(event.clientY) + setDragging(true) + // console.log({ windowHeight }) + // console.log(event.which === 1, 'event.which === 1') + // 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 (
+ {console.log({ props })}
{/* ${self._view.dragbar} */} -
+
{/* ${self._view.icon} */} @@ -400,7 +466,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
{/* onScroll=${throttle(reattach, 10)} onkeydown=${focusinput} */} {/* {props.autoCompletePopup.render()} */} - {console.log({ props })}
{
- {'>'} - + {'>'} +