diff --git a/apps/remixdesktop/src/plugins/xtermPlugin.ts b/apps/remixdesktop/src/plugins/xtermPlugin.ts index a138451148..a8f639d74f 100644 --- a/apps/remixdesktop/src/plugins/xtermPlugin.ts +++ b/apps/remixdesktop/src/plugins/xtermPlugin.ts @@ -86,6 +86,7 @@ class XtermPluginClient extends ElectronBasePluginClient { }); ptyProcess.onData((data: string) => { + console.log('onData', data) this.sendData(data, ptyProcess.pid); }) this.terminals[ptyProcess.pid] = ptyProcess diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.css b/libs/remix-ui/panel/src/lib/main/main-panel.css index 28a24ba01d..d23e7b58f9 100644 --- a/libs/remix-ui/panel/src/lib/main/main-panel.css +++ b/libs/remix-ui/panel/src/lib/main/main-panel.css @@ -1,7 +1,7 @@ .mainview { display : flex; flex-direction : column; - height : 100%; + height : 70%; width : 100%; position : relative; } diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx index 7679289da0..4d2c888313 100644 --- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx +++ b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx @@ -38,8 +38,9 @@ const RemixUiXterm = (props: RemixUiXtermProps) => { return ( <> + close - close + > ) diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx index c3c4233522..678eadf145 100644 --- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx +++ b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx @@ -12,6 +12,7 @@ export interface xtermState { queue: string timeStamp: number ref: any + hidden: boolean } export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { @@ -21,30 +22,34 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { useEffect(() => { setTimeout(async () => { - plugin.on('xterm', 'loaded', async () => { - }) - plugin.on('xterm', 'data', async (data: string, pid: number) => { - writeToTerminal(data, pid) - }) + plugin.on('xterm', 'loaded', async () => { + }) + plugin.on('xterm', 'data', async (data: string, pid: number) => { + writeToTerminal(data, pid) + }) - plugin.on('xterm', 'close', async (pid: number) => { - setTerminals(prevState => { - return prevState.filter(xtermState => xtermState.pid !== pid) + plugin.on('xterm', 'close', async (pid: number) => { + setTerminals(prevState => { + const removed = prevState.filter(xtermState => xtermState.pid !== pid) + removed[removed.length-1].hidden = false + return [...removed] + }) }) - }) - plugin.on('fs', 'workingDirChanged', (path: string) => { - setWorkingDir(path) - }) - }, 5000) + plugin.on('fs', 'workingDirChanged', (path: string) => { + setWorkingDir(path) + }) + }, 5000) }, []) const writeToTerminal = (data: string, pid: number) => { setTerminals(prevState => { const terminal = prevState.find(xtermState => xtermState.pid === pid) if (terminal.ref && terminal.ref.terminal) { + console.log('writing to terminal', terminal, data) terminal.ref.terminal.write(data) - }else { + } else { + console.log('no terminal ref', terminal) terminal.queue += data } return [...prevState] @@ -64,11 +69,16 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { const pid = await plugin.call('xterm', 'createTerminal', workingDir) setTerminals(prevState => { + // set all to hidden + prevState.forEach(xtermState => { + xtermState.hidden = true + }) return [...prevState, { pid: pid, queue: '', timeStamp: Date.now(), - ref: null + ref: null, + hidden: false }] }) } @@ -78,7 +88,7 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { setTerminals(prevState => { const terminal = prevState.find(xtermState => xtermState.pid === pid) terminal.ref = ref - if(terminal.queue) { + if (terminal.queue) { ref.terminal.write(terminal.queue) terminal.queue = '' } @@ -86,24 +96,44 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { }) } + const selectTerminal = (state: xtermState) => { + setTerminals(prevState => { + // set all to hidden + prevState.forEach(xtermState => { + xtermState.hidden = true + }) + const terminal = prevState.find(xtermState => xtermState.pid === state.pid) + terminal.hidden = false + return [...prevState] + }) + } + return (<> - { + + { createTerminal() - }}>open terminal + }}>open new terminal - {terminals.map((xtermState) => { - return ( - - - - ) - })} + <> + {terminals.map((xtermState, index) => { + + return ( selectTerminal(xtermState)} className={`btn btn-sm btn-secondary ${xtermState.hidden ? 'xterm-btn-none' : 'xterm-btn-active'}`}>Terminal {index + 1}) + })} + {terminals.map((xtermState) => { + return ( + + + + ) + })} + > - + + >) } diff --git a/libs/remix-ui/xterm/src/lib/css/index.css b/libs/remix-ui/xterm/src/lib/css/index.css index 35743913a2..2e0f99a0a1 100644 --- a/libs/remix-ui/xterm/src/lib/css/index.css +++ b/libs/remix-ui/xterm/src/lib/css/index.css @@ -1,3 +1,22 @@ .remix-ui-xterminals-container { overflow: scroll; +} +.xterm-panel { + display: flex; + flex-direction: column; +} + +.hide-xterm{ + display: none; +} + +.show-xterm{ + display: block; +} + +.xterm-btn-active { + background-color: var(--primary); +} +.xterm-btn-none { + background-color: var(--secondary); } \ No newline at end of file