@electerm/electerm-react 2.7.9 → 2.8.7

package/client/components/shortcuts/shortcut-control.jsx

@@ -184,9 +184,11 @@ class ShortcutControl extends React.PureComponent {
 
   togglefullscreenShortcut = throttle((e) => {
     e.stopPropagation()
-    const x = document.querySelector('.term-fullscreen-control') ||
-    document.querySelector('.session-current .term-fullscreen-control1')
-    x && x.click()
+    if (window.store.fullscreen) {
+      window.store.toggleSessFullscreen(false)
+    } else {
+      window.store.toggleSessFullscreen(true)
+    }
   }, 500)
 
   zoominShortcut = throttle((e) => {

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

@@ -176,9 +176,11 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !shiftKey &&
       ctrlKey &&
-      this.onZmodem
+      this.zmodemClient &&
+      this.zmodemClient.isActive
     ) {
-      this.onZmodemEnd()
+      this.zmodemClient.cancel()
+      return false
     }
 
     let codeName

package/client/components/tabs/workspace-save-modal.jsx

@@ -69,7 +69,7 @@ export default auto(function WorkspaceSaveModal ({ store }) {
       width={400}
     >
       <div className='pd1y'>
-        <Space direction='vertical' block>
+        <Space direction='vertical' className='width-100'>
           <Radio.Group
             value={saveMode}
             onChange={ev => setSaveMode(ev.target.value)}

package/client/components/terminal/attach-addon-custom.js

@@ -107,6 +107,19 @@ export default class AttachAddonCustom extends AttachAddon {
   }
 
   onMsg = (ev) => {
+    // Check if it's a JSON zmodem control message
+    if (typeof ev.data === 'string') {
+      try {
+        const msg = JSON.parse(ev.data)
+        if (msg.action === 'zmodem-event') {
+          // Let zmodem-client handle this, don't write to terminal
+          return
+        }
+      } catch (e) {
+        // Not JSON, continue processing
+      }
+    }
+
     // When in alternate screen mode (like vim, less, or TUI apps like Claude Code),
     // bypass trzsz processing to avoid interference with the application's display
     if (this.term?.buffer?.active?.type === 'alternate') {

package/client/components/terminal/event-emitter.js

@@ -0,0 +1,27 @@
+export default class EventEmitter {
+  constructor () {
+    this._events = {}
+  }
+
+  on (event, listener) {
+    if (!this._events[event]) {
+      this._events[event] = []
+    }
+    this._events[event].push(listener)
+    return this
+  }
+
+  off (event, listener) {
+    if (!this._events[event]) return this
+    this._events[event] = this._events[event].filter(l => l !== listener)
+    return this
+  }
+
+  emit (event, ...args) {
+    if (!this._events[event]) return false
+    this._events[event].forEach(listener => {
+      listener(...args)
+    })
+    return true
+  }
+}

package/client/components/terminal/terminal.jsx

@@ -1,6 +1,5 @@
 import { Component, createRef } from 'react'
 import { handleErr } from '../../common/fetch.jsx'
-import generate from '../../common/uid.js'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
@@ -22,10 +21,8 @@ import {
   paneMap,
   typeMap,
   isWin,
-  transferTypeMap,
   rendererTypes,
-  isMac,
-  zmodemTransferPackSize
+  isMac
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
@@ -37,7 +34,7 @@ import { CanvasAddon } from '@xterm/addon-canvas'
 import { WebglAddon } from '@xterm/addon-webgl'
 import { LigaturesAddon } from '@xterm/addon-ligatures'
 import getProxy from '../../common/get-proxy.js'
-import { AddonZmodem } from './xterm-zmodem.js'
+import { ZmodemClient } from './zmodem-client.js'
 import { Unicode11Addon } from '@xterm/addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed.js'
 import { Terminal } from '@xterm/xterm'
@@ -45,22 +42,20 @@ import NormalBuffer from './normal-buffer.jsx'
 import { createTerm, resizeTerm } from './terminal-apis.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
-import { getLocalFileInfo } from '../sftp/file-read.js'
 import { getFilePath, isUnsafeFilename } from '../../common/file-drop-utils.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
-import { formatBytes } from '../../common/byte-format.js'
 import {
   getShellIntegrationCommand,
   detectRemoteShell,
   detectShellType
 } from './shell.js'
-import * as fs from './fs.js'
 import iconsMap from '../sys-menu/icons-map.jsx'
 import { refs, refsStatic } from '../common/ref.js'
 import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
+import RemoteFloatControl from '../common/remote-float-control'
 
 const e = window.translate
 
@@ -143,9 +138,6 @@ class Term extends Component {
     if (window.store.activeTerminalId === this.props.tab.id) {
       window.store.activeTerminalId = ''
     }
-    if (this.zsession) {
-      this.onZmodemEnd()
-    }
     this.term.parent = null
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
@@ -162,7 +154,7 @@ class Term extends Component {
     }
     this.attachAddon = null
     this.fitAddon = null
-    this.zmodemAddon = null
+    this.zmodemClient = null
     this.searchAddon = null
     this.fitAddon = null
     this.cmdAddon = null
@@ -464,287 +456,6 @@ class Term extends Component {
     }
   }
 
-  onzmodemRetract = () => {
-    console.debug('zmodemRetract')
-  }
-
-  writeBanner = (type) => {
-    const border = '='.repeat(50)
-    this.term.write(`\r\n${border}\r\n`)
-    this.term.write('\x1b[33m\x1b[1mRecommend use trzsz instead: https://github.com/trzsz/trzsz\x1b[0m\r\n')
-    this.term.write(`${border}\r\n\r\n`)
-    this.term.write(`\x1b[32m\x1b[1mZMODEM::${type}::START\x1b[0m\r\n`)
-  }
-
-  onReceiveZmodemSession = async () => {
-    const savePath = await this.openSaveFolderSelect()
-    this.zsession.on('offer', this.onOfferReceive)
-    this.zsession.start()
-    this.term.write('\r\n\x1b[2A\r\n')
-    if (!savePath) {
-      return this.onZmodemEnd()
-    }
-    this.writeBanner('RECEIVE')
-    this.zmodemSavePath = savePath
-    return new Promise((resolve) => {
-      this.zsession.on('session_end', resolve)
-    })
-      .then(this.onZmodemEnd)
-      .catch(this.onZmodemCatch)
-  }
-
-  initZmodemDownload = async (name, size) => {
-    if (!this.zmodemSavePath) {
-      return
-    }
-    let pth = window.pre.resolve(
-      this.zmodemSavePath, name
-    )
-    const exist = await fs.exists(pth).catch(() => false)
-    if (exist) {
-      pth = pth + '.' + generate()
-    }
-    const fd = await fs.open(pth, 'w').catch(this.onZmodemEnd)
-    this.downloadFd = fd
-    this.downloadPath = pth
-    this.downloadCount = 0
-    this.zmodemStartTime = Date.now()
-    this.downloadSize = size
-    this.updateZmodemProgress(
-      0, pth, size, transferTypeMap.download
-    )
-    return fd
-  }
-
-  onOfferReceive = async (xfer) => {
-    const {
-      name,
-      size
-    } = xfer.get_details()
-    if (!this.downloadFd) {
-      await this.initZmodemDownload(name, size)
-    }
-    xfer.on('input', this.onZmodemDownload)
-    this.xfer = xfer
-    await xfer.accept()
-      .then(this.finishZmodemTransfer)
-      .catch(this.onZmodemEnd)
-  }
-
-  checkCache = async () => {
-    if (this.DownloadCache?.length > 0) {
-      return fs.write(this.downloadFd, new Uint8Array(this.DownloadCache))
-    }
-  }
-
-  onZmodemDownload = async payload => {
-    if (this.onCanceling || !this.downloadFd) {
-      return
-    }
-    // if (!this.DownloadCache) {
-    //   this.DownloadCache = []
-    // }
-    // this.DownloadCache = this.DownloadCache.concat(payload)
-    // this.downloadCount += payload.length
-    // if (this.DownloadCache.length < zmodemTransferPackSize) {
-    //   return this.updateZmodemProgress(
-    //     this.downloadCount,
-    //     this.downloadPath,
-    //     this.downloadSize,
-    //     transferTypeMap.download
-    //   )
-    // }
-    // this.writeCache = this.DownloadCache
-    // this.DownloadCache = []
-    this.downloadCount += payload.length
-    await fs.write(this.downloadFd, new Uint8Array(payload))
-    this.updateZmodemProgress(
-      this.downloadCount,
-      this.downloadPath,
-      this.downloadSize,
-      transferTypeMap.download
-    )
-  }
-
-  updateZmodemProgress = throttle((start, name, size, type) => {
-    this.zmodemTransfer = {
-      type,
-      start,
-      name,
-      size
-    }
-    this.writeZmodemProgress()
-  }, 500)
-
-  finishZmodemTransfer = () => {
-    this.zmodemTransfer = {
-      ...this.zmodemTransfer,
-      start: this.zmodemTransfer.size
-    }
-    this.writeZmodemProgress()
-  }
-
-  writeZmodemProgress = () => {
-    if (this.onCanceling) {
-      return
-    }
-    const {
-      size, start, name
-    } = this.zmodemTransfer
-    const speed = size > 0 ? formatBytes(start * 1000 / 1024 / (Date.now() - this.zmodemStartTime)) : 0
-    const percent = size > 0 ? Math.floor(start * 100 / size) : 100
-    const str = `\x1b[32m${name}\x1b[0m::${percent}%,${start}/${size},${speed}/s`
-    this.term.write('\r\n\x1b[2A' + str + '\n')
-  }
-
-  zmodemTransferFile = async (file, filesRemaining, sizeRemaining) => {
-    const offer = {
-      obj: file,
-      name: file.name,
-      size: file.size,
-      files_remaining: filesRemaining,
-      bytes_remaining: sizeRemaining
-    }
-    const xfer = await this.zsession.send_offer(offer)
-    if (!xfer) {
-      this.onZmodemEnd()
-      return window.store.onError(new Error('Transfer cancelled, maybe file already exists'))
-    }
-    this.zmodemStartTime = Date.now()
-    const fd = await fs.open(file.filePath, 'r')
-    let start = 0
-    const { size } = file
-    let inited = false
-    while (start < size || !inited) {
-      const rest = size - start
-      const len = rest > zmodemTransferPackSize ? zmodemTransferPackSize : rest
-      const buffer = new Uint8Array(len)
-      const newArr = await fs.read(fd, buffer, 0, len, null)
-      const n = newArr.length
-      await xfer.send(newArr)
-      start = start + n
-      inited = true
-      this.updateZmodemProgress(start, file.name, size, transferTypeMap.upload)
-      if (n < zmodemTransferPackSize || start >= file.size || this.onCanceling) {
-        break
-      }
-    }
-    await fs.close(fd)
-    this.finishZmodemTransfer()
-    await xfer.end()
-  }
-
-  openFileSelect = async () => {
-    const properties = [
-      'openFile',
-      'multiSelections',
-      'showHiddenFiles',
-      'noResolveAliases',
-      'treatPackageAsDirectory',
-      'dontAddToRecent'
-    ]
-    const files = await window.api.openDialog({
-      title: 'Choose some files to send',
-      message: 'Choose some files to send',
-      properties
-    }).catch(() => false)
-    if (!files || !files.length) {
-      return this.onZmodemEnd()
-    }
-    const r = []
-    for (const filePath of files) {
-      const stat = await getLocalFileInfo(filePath)
-      r.push({ ...stat, filePath })
-    }
-    return r
-  }
-
-  openSaveFolderSelect = async () => {
-    const savePaths = await window.api.openDialog({
-      title: 'Choose a folder to save file(s)',
-      message: 'Choose a folder to save file(s)',
-      properties: [
-        'openDirectory',
-        'showHiddenFiles',
-        'createDirectory',
-        'noResolveAliases',
-        'treatPackageAsDirectory',
-        'dontAddToRecent'
-      ]
-    }).catch(() => false)
-    if (!savePaths || !savePaths.length) {
-      return false
-    }
-    return savePaths[0]
-  }
-
-  beforeZmodemUpload = async (files) => {
-    if (!files || !files.length) {
-      return false
-    }
-    this.writeBanner('SEND')
-    let filesRemaining = files.length
-    let sizeRemaining = files.reduce((a, b) => a + b.size, 0)
-    for (const f of files) {
-      await this.zmodemTransferFile(f, filesRemaining, sizeRemaining)
-      filesRemaining = filesRemaining - 1
-      sizeRemaining = sizeRemaining - f.size
-    }
-    this.onZmodemEnd()
-  }
-
-  onSendZmodemSession = async () => {
-    this.term.write('\r\n\x1b[2A\n')
-    const files = await this.openFileSelect()
-    this.beforeZmodemUpload(files)
-  }
-
-  onZmodemEnd = async () => {
-    this.zmodemSavePath = null
-    this.onCanceling = true
-    if (this.downloadFd) {
-      await fs.close(this.downloadFd)
-    }
-    if (this.xfer && this.xfer.end) {
-      await this.xfer.end().catch(
-        console.error
-      )
-    }
-    this.xfer = null
-    if (this.zsession && this.zsession.close) {
-      await this.zsession.close().catch(
-        console.error
-      )
-    }
-    this.zsession = null
-    this.term.focus()
-    this.term.write('\r\n')
-    this.onZmodem = false
-    this.downloadFd = null
-    // delete this.downloadPath
-    // delete this.downloadCount
-    // delete this.downloadSize
-    this.DownloadCache = null
-  }
-
-  onZmodemCatch = (e) => {
-    window.store.onError(e)
-    this.onZmodemEnd()
-  }
-
-  onZmodemDetect = detection => {
-    this.onCanceling = false
-    this.term.blur()
-    this.onZmodem = true
-    const zsession = detection.confirm()
-    this.zsession = zsession
-    if (zsession.type === 'receive') {
-      this.onReceiveZmodemSession()
-    } else {
-      this.onSendZmodemSession()
-    }
-  }
-
   onContextMenuInner = e => {
     e.preventDefault()
     if (this.state.loading) {
@@ -1423,10 +1134,9 @@ class Term extends Component {
     }
     term.loadAddon(new WebLinksAddon(this.webLinkHandler))
     term.focus()
-    this.zmodemAddon = new AddonZmodem()
+    this.zmodemClient = new ZmodemClient(this)
+    this.zmodemClient.init(socket)
     this.fitAddon.fit()
-    term.loadAddon(this.zmodemAddon)
-    term.zmodemAttach(this)
     term.displayRaw = displayRaw
     term.loadAddon(
       new KeywordHighlighterAddon(keywords)
@@ -1583,7 +1293,7 @@ class Term extends Component {
 
   render () {
     const { loading } = this.state
-    const { height, width, left, top } = this.props
+    const { height, width, left, top, fullscreen } = this.props
     const { id } = this.props.tab
     const isActive = this.isActiveTerminal()
     const cls = classnames(
@@ -1648,6 +1358,9 @@ class Term extends Component {
             close={this.closeNormalBuffer}
           />
           <SearchResultBar {...barProps} />
+          <RemoteFloatControl
+            isFullScreen={fullscreen}
+          />
           <Spin className='loading-wrapper' spinning={loading} />
         </div>
       </Dropdown>