fix resize

apps/remixdesktop/src/plugins/xtermPlugin.ts

@@ -117,7 +117,7 @@ class XtermPluginClient extends ElectronBasePluginClient {
     if (os.platform() === 'win32') {
       let bash = await findExecutable('bash.exe')
       if(bash.length === 0) {
-        bash = await findExecutable('bash.exe', undefined, [process.env['ProgramFiles'] + '\\Git\\usr\\bin'])
+        bash = await findExecutable('bash.exe', undefined, [process.env['ProgramFiles'] + '\\Git\\bin'])
       }
       if (bash) {
         const shells = ['powershell.exe', 'cmd.exe', ...bash]
@@ -162,7 +162,7 @@ class XtermPluginClient extends ElectronBasePluginClient {
     this.emit('close', pid)
   }
 
-  async resize(pid: number, {cols, rows}: {cols: number; rows: number}) {
+  async resize({cols, rows}: {cols: number; rows: number}, pid: number) {
     if (this.terminals[pid]) {
       try {
         this.terminals[pid].resize(cols, rows)

libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx

@@ -1,48 +1,68 @@
-import React, { useState, useEffect, forwardRef } from 'react' // eslint-disable-line
+import React, {useState, useEffect, forwardRef} from 'react' // eslint-disable-line
-import { ElectronPlugin } from '@remixproject/engine-electron'
+import {ElectronPlugin} from '@remixproject/engine-electron'
-import { Xterm } from './xterm-wrap'
+import {Xterm} from './xterm-wrap'
-import { FitAddon } from './xterm-fit-addOn';
+import {FitAddon} from './xterm-fit-addOn'
 
+const config = {
+  fontSize: 12,
+  fontFamily:
+    'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
+  fontWeight: 'normal',
+  fontWeightBold: 'bold',
+  lineHeight: 1,
+  letterSpacing: 0,
+}
 
 const fitAddon = new FitAddon()
 
 export interface RemixUiXtermProps {
-    plugin: ElectronPlugin
+  plugin: ElectronPlugin
-    pid: number
+  pid: number
-    send: (data: string, pid: number) => void
+  send: (data: string, pid: number) => void
-    timeStamp: number
+  resize: (event: { cols: number; rows: number }, pid: number) => void
-    setTerminalRef: (pid: number, ref: any) => void
+  timeStamp: number
-    theme: {
+  setTerminalRef: (pid: number, ref: any) => void
-        backgroundColor: string
+  theme: {
-        textColor: string
+    backgroundColor: string
-    }
+    textColor: string
+  }
 }
 
 const RemixUiXterm = (props: RemixUiXtermProps) => {
-  const { plugin, pid, send, timeStamp } = props
+  const {plugin, pid, send, timeStamp, theme, resize} = props
   const xtermRef = React.useRef(null)
 
-
   useEffect(() => {
     props.setTerminalRef(pid, xtermRef.current)
   }, [xtermRef.current])
 
-  const onKey = (event: { key: string; domEvent: KeyboardEvent }) => {
+  const onKey = (event: {key: string; domEvent: KeyboardEvent}) => {
     send(event.key, pid)
   }
 
-  return (
+  const onResize = (event: { cols: number; rows: number }) => {
+    resize(event, pid)
+  }
 
+  return (
     <Xterm
       addons={[fitAddon]}
-      options={{ theme: { background: props.theme.backgroundColor, foreground: props.theme.textColor } }}
+      options={{
+        theme: {
+          background: theme.backgroundColor,
+          foreground: theme.textColor,
+        },
+        fontFamily: config.fontFamily,
+        fontSize: config.fontSize,
+        letterSpacing: config.letterSpacing,
+        lineHeight: config.lineHeight,
+      }}
+      onResize={onResize}
       onRender={() => fitAddon.fit()}
       ref={xtermRef}
-      onKey={onKey}></Xterm>
+      onKey={onKey}
-
+    ></Xterm>
-
   )
-
 }
 
-export default RemixUiXterm
+export default RemixUiXterm

libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx

@@ -92,6 +92,11 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
     plugin.call('xterm', 'keystroke', data, pid)
   }
 
+  const resize = (event: { cols: number; rows: number }, pid: number) => {
+    plugin.call('xterm', 'resize', event, pid)
+  }
+
+
   const createTerminal = async (shell?: string) => {
     const pid = await plugin.call('xterm', 'createTerminal', workingDir, shell)
     setShowOutput(false)
@@ -188,7 +193,7 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
             {terminals.map((xtermState) => {
               return (
                 <div className={`h-100 xterm-terminal ${xtermState.hidden ? 'hide-xterm' : 'show-xterm'}`} key={xtermState.pid} data-id={`remixUIXT${xtermState.pid}`}>
-                  <RemixUiXterm theme={theme} setTerminalRef={setTerminalRef} timeStamp={xtermState.timeStamp} send={send} pid={xtermState.pid} plugin={plugin}></RemixUiXterm>
+                  <RemixUiXterm theme={theme} setTerminalRef={setTerminalRef} timeStamp={xtermState.timeStamp} send={send} resize={resize} pid={xtermState.pid} plugin={plugin}></RemixUiXterm>
                 </div>
               )
             })}