From e18559a4b751be30629dd9fb692690fead26ed18 Mon Sep 17 00:00:00 2001 From: tizah Date: Mon, 5 Jul 2021 10:34:33 +0100 Subject: [PATCH] removing unused code in terminal.js and adding props to remix-ui-terminal.ts --- apps/remix-ide/src/app/panels/terminal.js | 653 ++---------------- .../src/lib/actions/terminalAction.ts | 0 .../src/lib/reducers/terminalReducer.ts | 0 .../terminal/src/lib/remix-ui-terminal.tsx | 44 +- 4 files changed, 94 insertions(+), 603 deletions(-) create mode 100644 libs/remix-ui/terminal/src/lib/actions/terminalAction.ts create mode 100644 libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index 64404fe87f..2d17230b72 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.js @@ -1,10 +1,9 @@ -/* global Node, requestAnimationFrame */ +/* global Node, requestAnimationFrame */ // eslint-disable-line import React from 'react' // eslint-disable-line import ReactDOM from 'react-dom' -import { RemixUiTerminal } from '@remix-ui/terminal' +import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line import { Plugin } from '@remixproject/engine' import * as packageJson from '../../../../../package.json' -import * as remixBleach from '../../lib/remixBleach' var yo = require('yo-yo') var javascriptserialize = require('javascript-serialize') @@ -15,9 +14,6 @@ var EventManager = require('../../lib/events') var CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI') var AutoCompletePopup = require('../ui/auto-complete-popup') -var TxLogger = require('../../app/ui/txLogger') - -var csjs = require('csjs-inject') var css = require('./styles/terminal-styles') @@ -25,8 +21,6 @@ var KONSOLES = [] function register (api) { KONSOLES.push(api) } -var ghostbar = yo`
` - const profile = { displayName: 'Terminal', name: 'terminal', @@ -41,623 +35,84 @@ class Terminal extends Plugin { super(profile) this.element = document.createElement('div') this.element.setAttribute('id', 'terminalView') - var self = this - self.event = new EventManager() - self.blockchain = opts.blockchain - self._api = api - self._opts = opts - self.data = { + this.event = new EventManager() + this.blockchain = opts.blockchain + this._api = api + this._opts = opts + this.data = { lineLength: opts.lineLength || 80, // ???? session: [], activeFilters: { commands: {}, input: '' }, filterFns: {} } - self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null } - self._components = {} - self._components.cmdInterpreter = new CommandInterpreterAPI(this, null, self.blockchain) - self._components.autoCompletePopup = new AutoCompletePopup(self._opts) - self._components.autoCompletePopup.event.register('handleSelect', function (input) { - const textList = self._view.input.innerText.split(' ') + this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null } + this._components = {} + this._components.cmdInterpreter = new CommandInterpreterAPI(this, null, this.blockchain) + this._components.autoCompletePopup = new AutoCompletePopup(this._opts) + this._components.autoCompletePopup.event.register('handleSelect', function (input) { + const textList = this._view.input.innerText.split(' ') textList.pop() textList.push(input) - self._view.input.innerText = textList - self._view.input.focus() - self.putCursor2End(self._view.input) + this._view.input.innerText = textList + this._view.input.focus() + this.putCursor2End(this._view.input) }) - self._commands = {} - self.commands = {} - self._JOURNAL = [] - self._jobs = [] - self._INDEX = {} - self._INDEX.all = [] - self._INDEX.allMain = [] - self._INDEX.commands = {} - self._INDEX.commandsMain = {} - self.registerCommand('html', self._blocksRenderer('html'), { activate: true }) - self.registerCommand('log', self._blocksRenderer('log'), { activate: true }) - self.registerCommand('info', self._blocksRenderer('info'), { activate: true }) - self.registerCommand('warn', self._blocksRenderer('warn'), { activate: true }) - self.registerCommand('error', self._blocksRenderer('error'), { activate: true }) - self.registerCommand('script', function execute (args, scopedCommands, append) { + this._commands = {} + this.commands = {} + this._JOURNAL = [] + this._jobs = [] + this._INDEX = {} + this._INDEX.all = [] + this._INDEX.allMain = [] + this._INDEX.commands = {} + this._INDEX.commandsMain = {} + this.registerCommand('html', this._blocksRenderer('html'), { activate: true }) + this.registerCommand('log', this._blocksRenderer('log'), { activate: true }) + this.registerCommand('info', this._blocksRenderer('info'), { activate: true }) + this.registerCommand('warn', this._blocksRenderer('warn'), { activate: true }) + this.registerCommand('error', this._blocksRenderer('error'), { activate: true }) + this.registerCommand('script', function execute (args, scopedCommands, append) { var script = String(args[0]) - self._shell(script, scopedCommands, function (error, output) { + this._shell(script, scopedCommands, function (error, output) { if (error) scopedCommands.error(error) else if (output) scopedCommands.log(output) }) }, { activate: true }) function basicFilter (value, query) { try { return value.indexOf(query) !== -1 } catch (e) { return false } } - self.registerFilter('log', basicFilter) - self.registerFilter('info', basicFilter) - self.registerFilter('warn', basicFilter) - self.registerFilter('error', basicFilter) - self.registerFilter('script', basicFilter) + this.registerFilter('log', basicFilter) + this.registerFilter('info', basicFilter) + this.registerFilter('warn', basicFilter) + this.registerFilter('error', basicFilter) + this.registerFilter('script', basicFilter) - if (opts.shell) self._shell = opts.shell // ??? - register(self) + if (opts.shell) this._shell = opts.shell // ??? + register(this) } onActivation () { this.renderComponent() } - // onActivation () { - // this.on('scriptRunner', 'log', (msg) => { - // this.commands.log.apply(this.commands, msg.data) - // }) - // this.on('scriptRunner', 'info', (msg) => { - // this.commands.info.apply(this.commands, msg.data) - // }) - // this.on('scriptRunner', 'warn', (msg) => { - // this.commands.warn.apply(this.commands, msg.data) - // }) - // this.on('scriptRunner', 'error', (msg) => { - // this.commands.error.apply(this.commands, msg.data) - // }) - // } - - // onDeactivation () { - // this.off('scriptRunner', 'log') - // this.off('scriptRunner', 'info') - // this.off('scriptRunner', 'warn') - // this.off('scriptRunner', 'error') - // } - - // log (message) { - // var command = this.commands[message.type] - // if (typeof command === 'function') { - // if (typeof message.value === 'string' && message.type === 'html') { - // var el = document.createElement('div') - // el.innerHTML = remixBleach.sanitize(message.value, { - // list: [ - // 'a', - // 'b', - // 'p', - // 'em', - // 'strong', - // 'div', - // 'span', - // 'ul', - // 'li', - // 'ol', - // 'hr' - // ] - // }) - // message.value = el - // } - // command(message.value) - // }; - // } - - // logHtml (html) { - // var command = this.commands.html - // if (typeof command === 'function') command(html) - // } - - // focus () { - // if (this._view.input) this._view.input.focus() - // } - render () { - // var self = this - // if (self._view.el) return self._view.el - //self._view.journal = yo`
` - // self._view.input = yo` - // { this.focus() }} onpaste=${paste} onkeydown=${change}> - // ` - // self._view.input.setAttribute('spellcheck', 'false') - // self._view.input.setAttribute('contenteditable', 'true') - // self._view.input.setAttribute('id', 'terminalCliInput') - // self._view.input.setAttribute('data-id', 'terminalCliInput') - - // self._view.input.innerText = '\n' - // self._view.cli = yo` - //
- // ${'>'} - // ${self._view.input} - //
- // ` - - // self._view.icon = yo` - // ` - // self._view.dragbar = yo` - //
` - - // self._view.pendingTxCount = yo`
0
` - // self._view.inputSearch = yo` - // ` - // self._view.bar = yo` - //
- // ${self._view.dragbar} - //
- // ${self._view.icon} - //
- // - //
- // ${self._view.pendingTxCount} - //
- //
- // - // - //
- //
- // - // ${self._view.inputSearch} - //
- //
- //
- // ` - // self._view.term = yo` - //
- // ${self._components.autoCompletePopup.render()} - //
- //
- // ${self._view.journal} - // ${self._view.cli} - //
- //
- // ` - // self._view.el = yo` - //
- // ${self._view.bar} - // ${self._view.term} - //
- // ` - // setInterval(async () => { - // try { - // self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount') - // } catch (err) {} - // }, 1000) - - // function listenOnNetwork (ev) { - // self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) - // } - //function paste (event) { - // const selection = window.getSelection() - // if (!selection.rangeCount) return false - // event.preventDefault() - // event.stopPropagation() - // var clipboard = (event.clipboardData || window.clipboardData) - // var text = clipboard.getData('text/plain') - // text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters - // var temp = document.createElement('div') - // temp.innerHTML = text - // var textnode = document.createTextNode(temp.textContent) - // selection.getRangeAt(0).insertNode(textnode) - // selection.empty() - // self.scroll2bottom() - // placeCaretAtEnd(event.currentTarget) - //} - //function placeCaretAtEnd (el) { - // el.focus() - // var range = document.createRange() - // range.selectNodeContents(el) - // range.collapse(false) - // var sel = window.getSelection() - // sel.removeAllRanges() - // sel.addRange(range) - // } - // function throttle (fn, wait) { - // var time = Date.now() - // return function debounce () { - // if ((time + wait - Date.now()) < 0) { - // fn.apply(this, arguments) - // time = Date.now() - // } - // } - // } - // var css2 = csjs` - // .anchor { - // position : static; - // border-top : 2px dotted blue; - // height : 10px; - // } - // .overlay { - // position : absolute; - // width : 100%; - // display : flex; - // align-items : center; - // justify-content : center; - // bottom : 0; - // right : 15px; - // min-height : 20px; - // } - // .text { - // z-index : 2; - // color : black; - // font-weight : bold; - // pointer-events : none; - // } - // .background { - // z-index : 1; - // opacity : 0.8; - // background-color : #a6aeba; - // cursor : pointer; - // } - // .ul { - // padding-left : 20px; - // padding-bottom : 5px; - // } - // ` - // var text = yo`
` - // var background = yo`
` - // var placeholder = yo`
${background}${text}
` - // var inserted = false - - // window.addEventListener('resize', function (event) { - // self.event.trigger('resize', []) - // self.event.trigger('resize', []) - // }) - - //function focusinput (event) { - // if ( - // event.altKey || - // event.ctrlKey || - // event.metaKey || - // event.shiftKey || - // event.key === 'Down' || - // event.key === 'ArrowDown' || - // event.key === 'Up' || - // event.key === 'ArrowUp' || - // event.key === 'Left' || - // event.key === 'ArrowLeft' || - // event.key === 'Right' || - // event.key === 'ArrowRight' || - // event.key === 'Esc' || - // event.key === 'Escape' - // ) return - - // refocus() - //} - - // function refocus () { - // self._view.input.focus() - // reattach({ currentTarget: self._view.term }) - // delete self.scroll2bottom - // self.scroll2bottom() - // } - //function reattach (event) { - // var el = event.currentTarget - // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30 - // if (isBottomed) { - // if (inserted) { - // text.innerText = '' - // background.onclick = undefined - // if (placeholder.parentElement) self._view.journal.removeChild(placeholder) - // } - // inserted = false - // delete self.scroll2bottom - // } else { - // if (!inserted) self._view.journal.appendChild(placeholder) - // inserted = true - // check() - // if (!placeholder.nextElementSibling) { - // placeholder.style.display = 'none' - // } else { - // placeholder.style = '' - // } - // self.scroll2bottom = function () { - // var next = placeholder.nextElementSibling - // if (next) { - // placeholder.style = '' - // check() - // var messages = 1 - // while ((next = next.nextElementSibling)) messages += 1 - // text.innerText = `${messages} new unread log entries` - // } else { - // placeholder.style.display = 'none' - // } - // } - // } - //} - //function check () { - // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15) - // var pos2 = placeholder.offsetTop - // if ((pos1 - pos2) > 0) { - // text.style.display = 'none' - // background.style.position = 'relative' - // background.style.opacity = 0.3 - // background.style.right = 0 - // background.style.borderBox = 'content-box' - // background.style.padding = '2px' - // background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px' - // background.onclick = undefined - // background.style.cursor = 'default' - // background.style.pointerEvents = 'none' - // } else { - // background.style = '' - // text.style = '' - // background.onclick = function (event) { - // placeholder.scrollIntoView() - // check() - // } - // } - //} - //function hover (event) { event.currentTarget.classList.toggle(css.hover) } - //function minimize (event) { - // event.preventDefault() - // event.stopPropagation() - // if (event.button === 0) { - // var classList = self._view.icon.classList - // classList.toggle('fa-angle-double-down') - // classList.toggle('fa-angle-double-up') - // self.event.trigger('resize', []) - // } - //} - // var filtertimeout = null - //function filter (event) { - // if (filtertimeout) { - // clearTimeout(filtertimeout) - // } - // filtertimeout = setTimeout(() => { - // self.updateJournal({ type: 'search', value: self._view.inputSearch.value }) - // self.scroll2bottom() - // }, 500) - // } - // function clear (event) { - // refocus() - // self._view.journal.innerHTML = '' - // } - // ----------------- resizeable ui --------------- - //function mousedown (event) { - // event.preventDefault() - // if (event.which === 1) { - // moveGhostbar(event) - // document.body.appendChild(ghostbar) - // document.addEventListener('mousemove', moveGhostbar) - // document.addEventListener('mouseup', removeGhostbar) - // document.addEventListener('keydown', cancelGhostbar) - // } - //} - //function cancelGhostbar (event) { - // if (event.keyCode === 27) { - // document.body.removeChild(ghostbar) - // document.removeEventListener('mousemove', moveGhostbar) - // document.removeEventListener('mouseup', removeGhostbar) - // document.removeEventListener('keydown', cancelGhostbar) - // } - // } - // function moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar - // ghostbar.style.top = self._api.getPosition(event) + 'px' - // } - // function removeGhostbar (event) { - // if (self._view.icon.classList.contains('fa-angle-double-up')) { - // self._view.icon.classList.toggle('fa-angle-double-down') - // self._view.icon.classList.toggle('fa-angle-double-up') - // } - // document.body.removeChild(ghostbar) - // document.removeEventListener('mousemove', moveGhostbar) - // document.removeEventListener('mouseup', removeGhostbar) - // document.removeEventListener('keydown', cancelGhostbar) - // self.event.trigger('resize', [self._api.getPosition(event)]) - // } - - // self._cmdHistory = [] - // self._cmdIndex = -1 - // self._cmdTemp = '' - - // var intro = yo` - //
- Welcome to Remix ${packageJson.version} -

- //
You can use this terminal to:
- // - //
The following libraries are accessible:
- // - //
- // ` - - //self._shell('remix.help()', self.commands, () => {}) - //self.commands.html(intro) - - //self._components.txLogger = new TxLogger(this, self.blockchain) - // self._components.txLogger.event.register('debuggingRequested', async (hash) => { - // // TODO should probably be in the run module - // if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger') - // this.call('menuicons', 'select', 'debugger') - // this.call('debugger', 'debug', hash) - // }) - - // return self._view.el return this.element - // function wrapScript (script) { - // const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix)) - // if (isKnownScript) return script - // return ` - // try { - // const ret = ${script}; - // if (ret instanceof Promise) { - // ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) }) - // } else { - // console.log(ret) - // } - // } catch (e) { - // console.log(e.message) - // } - // ` - // } - //function change (event) { - // if (self._components.autoCompletePopup.handleAutoComplete( - // event, - // self._view.input.innerText)) return - // if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n' - // if (event.which === 13) { - // if (event.ctrlKey) { // - // self._view.input.innerText += '\n' - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // self._components.autoCompletePopup.removeAutoComplete() - // } else { // - // self._cmdIndex = -1 - // self._cmdTemp = '' - // event.preventDefault() - // var script = self._view.input.innerText.trim() - // self._view.input.innerText = '\n' - // if (script.length) { - // self._cmdHistory.unshift(script) - // self.commands.script(wrapScript(script)) - // } - // self._components.autoCompletePopup.removeAutoComplete() - // } - // } else if (event.which === 38) { // - // var len = self._cmdHistory.length - // if (len === 0) return event.preventDefault() - // if (self._cmdHistory.length - 1 > self._cmdIndex) { - // self._cmdIndex++ - // } - // self._view.input.innerText = self._cmdHistory[self._cmdIndex] - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // } else if (event.which === 40) { // - // if (self._cmdIndex > -1) { - // self._cmdIndex-- - // } - // self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // } else { - // self._cmdTemp = self._view.input.innerText - // } - //} } renderComponent () { ReactDOM.render( - , + , this.element ) } - // putCursor2End (editable) { - // var range = document.createRange() - // range.selectNode(editable) - // var child = editable - // var chars - - // while (child) { - // if (child.lastChild) child = child.lastChild - // else break - // if (child.nodeType === Node.TEXT_NODE) { - // chars = child.textContent.length - // } else { - // chars = child.innerHTML.length - // } - // } - - // range.setEnd(child, chars) - // var toStart = true - // var toEnd = !toStart - // range.collapse(toEnd) - - // var sel = window.getSelection() - // sel.removeAllRanges() - // sel.addRange(range) - - // editable.focus() - // } - - //updateJournal (filterEvent) { - // var self = this - // var commands = self.data.activeFilters.commands - // var value = filterEvent.value - // if (filterEvent.type === 'select') { - // commands[value] = true - // if (!self._INDEX.commandsMain[value]) return - // self._INDEX.commandsMain[value].forEach(item => { - // item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item }) - // self._JOURNAL[item.gidx] = item - // }) - // } - // else if (filterEvent.type === 'deselect') { - // commands[value] = false - // if (!self._INDEX.commandsMain[value]) return - // self._INDEX.commandsMain[value].forEach(item => { - // item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true }) - // self._JOURNAL[item.gidx].hide = true - // }) - // } else if (filterEvent.type === 'search') { - // if (value !== self.data.activeFilters.input) { - // var query = self.data.activeFilters.input = value - // var items = self._JOURNAL - // for (var gidx = 0, len = items.length; gidx < len; gidx++) { - // var item = items[gidx] - // if (item && self.data.filterFns[item.cmd]) { - // var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true - // item.hide = !show - // } - // } - // } - // } - // var df = document.createDocumentFragment() - // self._JOURNAL.forEach(item => { - // if (item && item.el && !item.hide) df.appendChild(item.el) - // }) - // self._view.journal.innerHTML = '' - // requestAnimationFrame(function updateDOM () { - // self._view.journal.appendChild(df) - // }) - //} - _appendItem (item) { var self = this var { el, gidx } = item @@ -785,7 +240,7 @@ class Terminal extends Plugin { if (script.indexOf('remix.') === 0) { // we keep the old feature. This will basically only be called when the command is querying the "remix" object. // for all the other case, we use the Code Executor plugin - var context = domTerminalFeatures(self, scopedCommands, self.blockchain) + var context = domTerminalFeatures(scopedCommands, self.blockchain) try { var cmds = vm.createContext(context) var result = vm.runInContext(script, cmds) @@ -809,11 +264,11 @@ class Terminal extends Plugin { } } -// function domTerminalFeatures (self, scopedCommands, blockchain) { -// return { -// remix: self._components.cmdInterpreter -// } -// } +function domTerminalFeatures (scopedCommands, blockchain) { + return { + remix: this._components.cmdInterpreter + } +} function blockify (el) { return yo`
${el}
` } diff --git a/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts b/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts new file mode 100644 index 0000000000..e69de29bb2 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 106f5812a9..85351939d2 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -1,30 +1,53 @@ -import React, { useState } from 'react' // eslint-disable-line +import React, { useState, useEffect } from 'react' // eslint-disable-line import './remix-ui-terminal.css' /* eslint-disable-next-line */ export interface RemixUiTerminalProps { propterties: any + event: any + autoCompletePopupEvent: any + autoCompletePopup: any + blockchain: any + api: any + options: any + data: any + cmdInterpreter: any } export const RemixUiTerminal = (props: RemixUiTerminalProps) => { const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down') + // events + useEffect(() => { + // window.addEventListener('resize', function () { + // props.event.trigger('resize', []) + // props.event.trigger('resize', []) + // }) + // return () => { + // window.removeEventListener('resize', function () { + // props.event.trigger('resize', []) + // props.event.trigger('resize', []) + // }) + // } + }, []) + const handleMinimizeTerminal = (event) => { - console.log('clikced') + console.log('clikced', props.event) if (toggleDownUp === 'fa-angle-double-down') { console.log('clikced down') setToggleDownUp('fa-angle-double-up') + props.event.trigger.resize('resize', []) } else { console.log('clikced up') // event.trigger('resize', []) setToggleDownUp('fa-angle-double-down') } + console.log(props.event, 'event.trigger') } return (
- {console.log({ toggleDownUp })}
{/* ${self._view.dragbar} */}
@@ -68,7 +91,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
- Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')} +
+ {/* onScroll=${throttle(reattach, 10)} onkeydown=${focusinput} */} + {/* {props.autoCompletePopup.render()} */} + {console.log({ props })} +
+
+
+
) }