@electerm/electerm-react 1.50.31 → 1.50.46

package/client/components/main/css-overwrite.jsx

@@ -48,7 +48,6 @@ export default class CssOverwrite extends PureComponent {
 
     const styles = [
       `background-image: ${st}`,
-      'background-size: cover',
       'background-position: center'
     ]
 

package/client/components/main/main.jsx

@@ -23,20 +23,30 @@ import { isMac, isWin } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { LoadingUI } from './loading'
-import { ConfigProvider, notification } from 'antd'
+import { ConfigProvider, notification, message } from 'antd'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import { pick } from 'lodash-es'
 import './wrapper.styl'
 
+function setupGlobalMessageDismiss () {
+  document.addEventListener('click', (event) => {
+    const messageElement = event.target.closest('.ant-message-notice')
+    if (messageElement) {
+      message.destroy()
+    }
+  })
+}
+
 export default auto(function Index (props) {
   useEffect(() => {
     notification.config({
       placement: 'bottomRight'
     })
+    setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
-    store.onResize()
+    setTimeout(store.triggerResize, 200)
     store.initStoreEvents()
     const { ipcOnEvent } = window.pre
     ipcOnEvent('checkupdate', store.onCheckUpdate)

package/client/components/session/sessions.jsx

@@ -119,7 +119,7 @@ class Sessions extends Component {
         currentTabId: id
       })
     } else {
-      document.querySelector('.tab.active').click()
+      document.querySelector('.tab.active')?.click()
     }
   }
 
@@ -138,17 +138,15 @@ class Sessions extends Component {
       if (tab) {
         Object.assign(tab, update)
       }
-      this.updateStoreTabs(tabs)
       return {
         tabs
       }
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
     })
   }
 
-  addTab = (
-    _tab,
-    _index
-  ) => {
+  addTab = (_tab, _index) => {
     this.setState((oldState) => {
       const tabs = copy(oldState.tabs)
       const index = typeof _index === 'undefined'
@@ -162,15 +160,17 @@ class Sessions extends Component {
       }
       tab.batch = this.props.batch
       tabs.splice(index, 0, tab)
-      this.updateStoreTabs(tabs)
-      this.updateStoreCurrentTabId(tab.id)
       return {
         currentTabId: tab.id,
         tabs
       }
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
+      this.updateStoreCurrentTabId(this.state.currentTabId)
     })
   }
 
+  // After
   delTab = (id) => {
     this.setState((oldState) => {
       const tabs = copy(oldState.tabs)
@@ -183,13 +183,16 @@ class Sessions extends Component {
         i = i ? i - 1 : i + 1
         const next = tabs[i] || {}
         up.currentTabId = next.id || ''
-        this.updateStoreCurrentTabId(next.id)
       }
       up.tabs = tabs.filter(t => {
         return t.id !== id
       })
-      this.updateStoreTabs(up.tabs)
       return up
+    }, () => {
+      this.updateStoreTabs(this.state.tabs)
+      if (this.state.currentTabId !== id) {
+        this.updateStoreCurrentTabId(this.state.currentTabId)
+      }
     })
   }
 
@@ -247,11 +250,15 @@ class Sessions extends Component {
     if (!matchedTab) {
       return
     }
-    this.timer = setTimeout(window.store.triggerResize, 500)
-    this.updateStoreCurrentTabId(id)
+
+    // Batch the updates
     this.setState({
       currentTabId: id
-    }, this.postChange)
+    }, () => {
+      this.updateStoreCurrentTabId(id)
+      this.timer = setTimeout(window.store.triggerResize, 500)
+      this.postChange()
+    })
   }
 
   setTabs = tabs => {

package/client/components/shortcuts/shortcut-handler.js

@@ -56,6 +56,9 @@ export function shortcutExtend (Cls) {
       type,
       key
     } = event
+    if (this.cmdAddon) {
+      this.cmdAddon.handleKey(event)
+    }
     if (
       this.term &&
       key === 'Backspace' &&

package/client/components/tabs/index.jsx

@@ -483,7 +483,7 @@ export default class Tabs extends React.Component {
         menu={{ items }}
         placement='bottomRight'
       >
-        <span className='tabs-dd-icon mg1l'>
+        <span className='tabs-dd-icon layout-dd-icon mg1l'>
           <Icon /> <DownOutlined />
         </span>
       </Dropdown>

package/client/components/tabs/tabs.styl

@@ -7,6 +7,8 @@
   ::-webkit-scrollbar
     width 0
     display none
+.not-system-ui.is-mac .layout-item.v1 .tabs-inner
+  margin-left 42px
 .not-system-ui.is-mac.not-webapp .layout-item.v1
   .tabs-inner
     margin-left 72px
@@ -25,8 +27,6 @@
   height 36px
   overflow-x scroll
   overflow-y hidden
-.layout-item.v1 .tabs-inner
-  margin-left 42px
 
 .tabs-wrapper
   z-index 3

package/client/components/terminal/command-tracker-addon.js

@@ -0,0 +1,75 @@
+export class CommandTrackerAddon {
+  constructor () {
+    this.terminal = undefined
+    this.activeCommand = ''
+    this.currentCommand = ''
+    this.cursorPosition = 0
+    this.timeout = null
+    this.handleKey = this.debounce(this._handleKey, 200) // 10ms debounce
+  }
+
+  debounce = (func, wait) => {
+    return (...args) => {
+      const later = () => {
+        clearTimeout(this.timeout)
+        func.apply(this, args)
+      }
+
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(later, wait)
+    }
+  }
+
+  activate (terminal) {
+    this.terminal = terminal
+  }
+
+  dispose () {
+    this.term = null
+    if (this._disposables) {
+      this._disposables.forEach(d => d.dispose())
+      this._disposables.length = 0
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+      this.timeout = null
+    }
+  }
+
+  handleData = (data) => {
+    // Handle regular input
+    this.activeCommand = this.activeCommand.slice(0, this.cursorPosition) + data + this.activeCommand.slice(this.cursorPosition)
+    this.cursorPosition += data.length
+  }
+
+  // This is now our internal handler
+  _handleKey = (e) => {
+    const { key } = e
+    if (key === 'Enter') {
+      // Command executed, reset
+      this.currentCommand = this.activeCommand
+      this.activeCommand = ''
+      this.cursorPosition = 0
+    } else if (key === 'Backspace') {
+      // Handle backspace
+      if (this.cursorPosition > 0) {
+        this.activeCommand = this.activeCommand.slice(0, this.cursorPosition - 1) + this.activeCommand.slice(this.cursorPosition)
+        this.cursorPosition--
+      }
+    } else if (key === 'ArrowLeft') {
+      // Move cursor left
+      if (this.cursorPosition > 0) {
+        this.cursorPosition--
+      }
+    } else if (key === 'ArrowRight') {
+      // Move cursor right
+      if (this.cursorPosition < this.activeCommand.length) {
+        this.cursorPosition++
+      }
+    }
+  }
+
+  getCurrentCommand () {
+    return this.activeCommand || this.currentCommand
+  }
+}

package/client/components/terminal/index.jsx

@@ -48,8 +48,7 @@ import { createTerm, resizeTerm } from './terminal-apis'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
-import { SerializeAddon } from '@xterm/addon-serialize'
-import strip from '@electerm/strip-ansi'
+import { CommandTrackerAddon } from './command-tracker-addon.js'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
 
@@ -184,8 +183,13 @@ clear\r`
     this.fitAddon = null
     this.zmodemAddon = null
     this.searchAddon = null
-    this.serializeAddon = null
     this.fitAddon = null
+    this.cmdAddon = null
+    // Clear the notification if it exists
+    if (this.socketCloseWarning) {
+      notification.destroy(this.socketCloseWarning.key)
+      this.socketCloseWarning = null
+    }
   }
 
   terminalConfigProps = [
@@ -928,17 +932,8 @@ clear\r`
     return result
   }
 
-  // onKey = ({ key }) => {
-  //   if (key === '\r') {
-  //     this.getCmd()
-  //   }
-  // }
-
   getCmd = () => {
-    const str = this.serializeAddon.serialize()
-    const arr = strip(str).split(/ +/)
-    const len = arr.length
-    return arr[len - 1]
+    return this.cmdAddon.getCurrentCommand()
   }
 
   getCwd = () => {
@@ -963,13 +958,15 @@ clear\r`
   }
 
   onData = (d) => {
-    // runIdle(this.notifyOnData)
+    if (this.cmdAddon) {
+      this.cmdAddon.handleData(d)
+    }
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      const data = this.getCmd()
+      const data = this.getCmd().trim()
       if (this.term.buffer.active.type !== 'alternate') {
-        setTimeout(this.getCwd, 200)
+        this.timers.getCwd = setTimeout(this.getCwd, 200)
       }
       const exitCmds = [
         'exit',
@@ -1028,18 +1025,18 @@ clear\r`
 
     // term.on('keydown', this.handleEvent)
     this.fitAddon = new FitAddon()
+    this.cmdAddon = new CommandTrackerAddon()
     this.searchAddon = new SearchAddon()
     const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const unicode11Addon = new Unicode11Addon()
     term.loadAddon(unicode11Addon)
-    this.serializeAddon = new SerializeAddon()
-    term.loadAddon(this.serializeAddon)
     term.loadAddon(ligtureAddon)
     // activate the new version
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
+    term.loadAddon(this.cmdAddon)
     term.onData(this.onData)
     this.term = term
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
@@ -1056,6 +1053,7 @@ clear\r`
   }
 
   runInitScript = () => {
+    window.store.triggerResize()
     const {
       type,
       title,

package/client/components/terminal/terminal.styl

@@ -34,7 +34,10 @@
 #container
   .xterm-viewport
     background-repeat no-repeat
-    background-position 50% 50%
+    background-position center
+    background-color: transparent !important
+    z-index 1
+
 
 .terminal-not-active .xterm-text-layer
   opacity .74

package/client/entry/index.jsx

@@ -4,10 +4,6 @@ import '@xterm/xterm/css/xterm.css'
 import '../common/trzsz'
 import 'firacode/distr/fira_code.css'
 import Main from '../components/main/index.jsx'
-import { notification } from 'antd'
-notification.config({
-  placement: 'bottomRight'
-})
 
 const rootElement = createRoot(document.getElementById('container'))
 rootElement.render(

package/client/store/event.js

@@ -63,6 +63,7 @@ export default Store => {
 
   Store.prototype.triggerResize = function () {
     window.store.resizeTrigger = window.store.resizeTrigger ? 0 : 1
+    window.dispatchEvent(new Event('resize'))
   }
 
   Store.prototype.toggleTermFullscreen = function (terminalFullScreen) {

package/client/store/watch.js

@@ -99,11 +99,6 @@ export default store => {
     return store._checkedKeys
   }).start()
 
-  // autoRun(store, () => {
-  //   window.store.onLayoutChange()
-  //   return store.layout
-  // }).start()
-
   autoRun(store, () => {
     const tabs = store.getTabs()
     const { currentTabId } = store

package/client/views/index.pug

@@ -27,7 +27,7 @@ html
       }
     - if (!isDev)
       link(rel='stylesheet', href='css/' + version + '-basic.css')
-      link(rel='stylesheet', href='css/' + version + '-index.css')
+      link(rel='stylesheet', href='css/' + version + '-electerm.css')
       style(id='theme-css').
       style(id='custom-css').
   body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.50.31",
+  "version": "1.50.46",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",