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,8 +1,17 @@
 import React, {useState, useEffect, forwardRef} from 'react' // eslint-disable-line
 import {ElectronPlugin} from '@remixproject/engine-electron'
 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()
 
@@ -10,6 +19,7 @@ export interface RemixUiXtermProps {
   plugin: ElectronPlugin
   pid: number
   send: (data: string, pid: number) => void
+  resize: (event: { cols: number; rows: number }, pid: number) => void
   timeStamp: number
   setTerminalRef: (pid: number, ref: any) => void
   theme: {
@@ -19,10 +29,9 @@ export interface RemixUiXtermProps {
 }
 
 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])
@@ -31,18 +40,29 @@ const RemixUiXterm = (props: RemixUiXtermProps) => {
     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

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>
               )
             })}