@electerm/electerm-react 1.37.126 → 1.38.6

package/client/components/terminal/fs.js

@@ -0,0 +1,59 @@
+export const open = (filePath, flag) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.open(filePath, flag, (err, fd) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(fd)
+    })
+  })
+}
+
+export const close = (fd) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.close(fd, (err) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(true)
+    })
+  })
+}
+
+export const exists = (filePath) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.access(filePath, (err) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(true)
+    })
+  })
+}
+
+export const read = (fd, buffer, offset, length, position) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.read(fd, buffer, offset, length, position, (err, bytesRead, buffer) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(buffer.subarray(0, bytesRead))
+    })
+  })
+}
+
+export const write = (fd, buffer) => {
+  const fs = window.require('fs')
+  return new Promise((resolve, reject) => {
+    fs.write(fd, buffer, (err, buffer) => {
+      if (err) {
+        return reject(err)
+      }
+      return resolve(buffer)
+    })
+  })
+}

package/client/components/terminal/index.jsx

@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import ZmodemTransfer from './zmodem-transfer'
 import { handleErr } from '../../common/fetch'
 import generate from '../../common/uid'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
@@ -27,7 +26,8 @@ import {
   commonActions,
   rendererTypes,
   cwdId,
-  isMac
+  isMac,
+  zmodemTransferPackSize
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, copy } from '../../common/clipboard'
@@ -39,7 +39,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'
-import { Zmodem, AddonZmodem } from './xterm-zmodem'
+import { AddonZmodem } from './xterm-zmodem'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
 import { Terminal } from 'xterm'
@@ -47,8 +47,11 @@ import NormalBuffer from './normal-buffer'
 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 { formatBytes } from '../../common/byte-format.js'
+import * as fs from './fs.js'
 
 const { prefix } = window
 const e = prefix('ssh')
@@ -71,7 +74,6 @@ class Term extends Component {
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       passType: 'password',
-      zmodemTransfer: null,
       lines: []
     }
   }
@@ -128,6 +130,9 @@ class Term extends Component {
   }
 
   componentWillUnmount () {
+    if (this.zsession) {
+      this.onZmodemEnd()
+    }
     delete this.term.parent
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
@@ -161,6 +166,21 @@ class Term extends Component {
     }
   ]
 
+  initAttachAddon = (encode) => {
+    this.attachAddon = new AttachAddon(
+      this.socket,
+      undefined,
+      this.props.tab.encode,
+      isWin && !this.isRemote()
+    )
+    if (encode || this.decode) {
+      this.attachAddon.decoder = encode
+        ? new TextDecoder(encode)
+        : this.decode
+    }
+    this.term.loadAddon(this.attachAddon)
+  }
+
   getValue = (props, type, name) => {
     return type === 'glob'
       ? props.config[name]
@@ -420,152 +440,259 @@ class Term extends Component {
     log.debug('zmodemRetract')
   }
 
-  onReceiveZmodemSession = () => {
-    //  * zmodem transfer
-    //  * then run rz to send from your browser or
-    //  * sz <file> to send from the remote peer.
+  writeBanner = (type) => {
     this.term.write('\r\nRecommmend use trzsz instead: https://github.com/trzsz/trzsz\r\n')
+    this.term.write(`\x1b[32mZMODEM::${type}::START\x1b[0m\r\n\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)
+    })
+      .then(this.onZmodemEnd)
+      .catch(this.onZmodemCatch)
   }
 
-  updateProgress = (xfer, type) => {
-    if (this.onCanceling) {
+  initZmodemDownload = async (name, size) => {
+    if (!this.zmodemSavePath) {
       return
     }
-    const fileInfo = xfer.get_details()
-    const {
-      size
-    } = fileInfo
-    const total = xfer.get_offset() || 0
-    let percent = Math.floor(100 * total / size)
-    if (percent > 99) {
-      percent = 99
+    let pth = window.pre.resolve(
+      this.zmodemSavePath, name
+    )
+    const exist = await fs.exists(pth)
+    if (exist) {
+      pth = pth + '.' + generate()
     }
-    this.setState({
-      zmodemTransfer: {
-        fileInfo,
-        percent,
-        transferedSize: total,
-        type
-      }
-    })
+    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
   }
 
-  saveToDisk = (xfer, buffer) => {
-    return Zmodem.Browser
-      .save_to_disk(buffer, xfer.get_details().name)
+  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)
   }
 
-  onOfferReceive = xfer => {
-    this.updateProgress(xfer, transferTypeMap.download)
-    const FILE_BUFFER = []
-    xfer.on('input', (payload) => {
-      this.updateProgress(xfer, transferTypeMap.download)
-      FILE_BUFFER.push(new Uint8Array(payload))
-    })
-    xfer.accept()
-      .then(
-        () => {
-          this.saveToDisk(xfer, FILE_BUFFER)
-        }
-      )
-      .catch(window.store.onError)
+  checkCache = async () => {
+    if (this.DownloadCache?.length > 0) {
+      return fs.write(this.downloadFd, new Uint8Array(this.DownloadCache))
+    }
   }
 
-  beforeZmodemUpload = (file, files) => {
-    if (!files.length) {
-      return false
+  onZmodemDownload = async payload => {
+    if (this.onCanceling || !this.downloadFd) {
+      return
     }
-    // const f = files[0]
-    // if (f.size > maxZmodemUploadSize) {
-    //   if (this.zsession) {
-    //     this.zsession.abort()
-    //   }
-    //   this.onZmodemEnd()
-    //   // if (this.props.tab.enableSftp) {
-    //   //   notification.info({
-    //   //     message: `Uploading by sftp`,
-    //   //     duration: 8
-    //   //   })
-    //   //   return this.transferBySftp(files)
-    //   // } else {
-    //   const url = 'https://github.com/FGasper/zmodemjs/issues/11'
-    //   const msg = (
-    //     <div>
-    //       <p>Currently <b>rz</b> only support upload file size less than {filesize(maxZmodemUploadSize)}, due to known issue:</p>
-    //       <p><Link to={url}>{url}</Link></p>
-    //       <p>You can try upload in sftp which is much faster.</p>
-    //     </div>
+    // 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
     //   )
-    //   notification.error({
-    //     message: msg,
-    //     duration: 8
-    //   })
-    //   // }
     // }
-    const th = this
-    Zmodem.Browser.send_files(
-      this.zsession,
-      files, {
-        on_offer_response (obj, xfer) {
-          if (xfer) {
-            th.updateProgress(xfer, transferTypeMap.upload)
-          }
-        },
-        on_progress (obj, xfer) {
-          th.updateProgress(xfer, transferTypeMap.upload)
-        }
-      }
+    // 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
     )
-      .then(th.onZmodemEndSend)
-      .catch(th.onZmodemCatch)
+  }
 
-    return false
+  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()
   }
 
-  onSendZmodemSession = () => {
-    this.setState(() => {
-      return {
-        zmodemTransfer: {
-          type: transferTypeMap.upload
-        }
+  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
     })
+    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'
+      ]
+    })
+    if (!savePaths || !savePaths.length) {
+      return false
+    }
+    return savePaths[0]
   }
 
-  cancelZmodem = () => {
-    this.onZmodemEndSend()
+  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()
   }
 
-  onZmodemEndSend = () => {
-    this.zsession && this.zsession.close && this.zsession.close()
-    this.onZmodemEnd()
+  onSendZmodemSession = async () => {
+    this.term.write('\r\n\x1b[2A\n')
+    const files = await this.openFileSelect()
+    this.beforeZmodemUpload(files)
   }
 
-  onZmodemEnd = () => {
-    delete this.onZmodem
+  onZmodemEnd = async () => {
+    delete this.zmodemSavePath
     this.onCanceling = true
-    this.attachAddon = new AttachAddon(
-      this.socket,
-      undefined,
-      this.props.tab.encode,
-      isWin && !this.isRemote()
-    )
-    if (this.decoder) {
-      this.attachAddon.decoder = this.decode
+    if (this.downloadFd) {
+      await fs.close(this.downloadFd)
     }
-    this.term.loadAddon(this.attachAddon)
-    this.setState(() => {
-      return {
-        zmodemTransfer: null
-      }
-    })
+    if (this.xfer && this.xfer.end) {
+      await this.xfer.end().catch(
+        console.error
+      )
+    }
+    delete this.xfer
+    if (this.zsession && this.zsession.close) {
+      await this.zsession.close().catch(
+        console.error
+      )
+    }
+    delete this.zsession
     this.term.focus()
     this.term.write('\r\n')
+    delete this.downloadFd
+    delete this.downloadPath
+    delete this.downloadCount
+    delete this.downloadSize
+    delete this.DownloadCache
   }
 
   onZmodemCatch = (e) => {
@@ -575,7 +702,6 @@ class Term extends Component {
 
   onZmodemDetect = detection => {
     this.onCanceling = false
-    this.attachAddon.dispose()
     this.term.blur()
     this.onZmodem = true
     const zsession = detection.confirm()
@@ -1055,9 +1181,7 @@ class Term extends Component {
       this.zmodemAddon = new AddonZmodem()
       this.fitAddon.fit()
       term.loadAddon(this.zmodemAddon)
-      term.zmodemAttach(this.socket, {
-        noTerminalWriteOutsideSession: true
-      }, this)
+      term.zmodemAttach(this)
     }
     term.displayRaw = displayRaw
     term.loadAddon(
@@ -1085,7 +1209,7 @@ class Term extends Component {
 
   onerrorSocket = err => {
     this.setStatus(statusMap.error)
-    log.warning('onerrorSocket', err)
+    log.error('onerrorSocket', err)
   }
 
   oncloseSocket = () => {
@@ -1184,7 +1308,7 @@ class Term extends Component {
   }
 
   render () {
-    const { id, loading, zmodemTransfer } = this.state
+    const { id, loading } = this.state
     const { height, width, left, top, position, id: pid, activeSplitId } = this.props
     const cls = classnames('term-wrap', {
       'not-first-term': !!position
@@ -1242,11 +1366,6 @@ class Term extends Component {
             close={this.closeNormalBuffer}
           />
         </div>
-        <ZmodemTransfer
-          zmodemTransfer={zmodemTransfer}
-          cancelZmodem={this.cancelZmodem}
-          beforeZmodemUpload={this.beforeZmodemUpload}
-        />
         <Spin className='loading-wrapper' spinning={loading} />
       </div>
     )

package/client/components/terminal/xterm-zmodem.js

@@ -1,48 +1,55 @@
 import zmodem from 'zmodem.js/src/zmodem_browser'
 
-function zmodemAttach (ws, opts, ctx) {
-  if (opts === undefined) { opts = {} }
-  const term = this
-  const senderFunc = function (octets) { return ws.send(new Uint8Array(octets)) }
-  let zsentry = null
-  function shouldWrite () {
-    return !!zsentry.get_confirmed_session() || !opts.noTerminalWriteOutsideSession
+export class AddonZmodem {
+  _disposables = []
+
+  activate (terminal) {
+    terminal.zmodemAttach = this.zmodemAttach.bind(this)
   }
-  zsentry = new zmodem.Sentry({
-    to_terminal: function (octets) {
-      if (shouldWrite()) {
-        term.write(String.fromCharCode.apply(String, octets))
-      }
-    },
-    sender: senderFunc,
-    on_retract: ctx.onzmodemRetract,
-    on_detect: ctx.onZmodemDetect
-  })
-  function handleWSMessage (evt) {
-    if (typeof evt.data === 'string') {
-      if (shouldWrite()) {
-        term.write(evt.data)
-      }
+
+  sendWebSocket (octets) {
+    const { socket } = this
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      return socket.send(new Uint8Array(octets))
     } else {
-      zsentry.consume(evt.data)
+      console.error('WebSocket is not open')
     }
   }
-  ws.binaryType = 'arraybuffer'
-  ws.addEventListener('message', handleWSMessage)
-}
 
-export class AddonZmodem {
-  _disposables = []
+  zmodemAttach (ctx) {
+    this.socket = ctx.socket
+    this.term = ctx.term
+    this.ctx = ctx
+    this.zsentry = new zmodem.Sentry({
+      to_terminal: (octets) => {
+        if (ctx.onZmodem) {
+          this.term.write(String.fromCharCode.apply(String, octets))
+        }
+      },
+      sender: this.sendWebSocket.bind(this),
+      on_retract: ctx.onzmodemRetract,
+      on_detect: ctx.onZmodemDetect
+    })
+    this.socket.binaryType = 'arraybuffer'
+    this.socket.addEventListener('message', this.handleWSMessage.bind(this))
+  }
 
-  activate (terminal) {
-    terminal.zmodemAttach = zmodemAttach
-    terminal.zmodemBrowser = zmodem.Browser
+  handleWSMessage (evt) {
+    if (typeof evt.data === 'string') {
+      if (this.ctx.onZmodem) {
+        this.term.write(evt.data)
+      }
+    } else {
+      this.zsentry.consume(evt.data)
+    }
   }
 
   dispose () {
+    this.socket && this.socket.removeEventListener('message', this.handleWSMessage)
     this._disposables.forEach(d => d.dispose())
     this._disposables.length = 0
+    this.term = null
+    this.zsentry = null
+    this.socket = null
   }
 }
-
-export const Zmodem = zmodem

package/client/css/basic.styl

@@ -38,4 +38,4 @@ body
   display: none !important
 
 a
-  color primary
+  color primary

package/client/css/mobile.styl

@@ -0,0 +1,8 @@
+.l500
+  display none !important
+
+@media (max-width: 500px)
+  .w500
+    display none !important
+  .l500
+    display inline !important

package/client/entry/basic.js

@@ -2,6 +2,7 @@
  * init app data then write main script to html body
  */
 import '../css/basic.styl'
+import '../css/mobile.styl'
 import { get as _get } from 'lodash-es'
 import '../common/pre'
 

package/client/store/index.js

@@ -216,7 +216,6 @@ class Store {
       store
     } = window
     return store.showModal ||
-      store.termSearchOpen ||
       store.showInfoModal ||
       store.showEditor ||
       store.showFileModal
@@ -226,10 +225,6 @@ class Store {
     return 0
   }
 
-  get tabsHeight () {
-    return 45 // window.store.config.useSystemTitleBar ? 45 : 56
-  }
-
   get langs () {
     return JSON.parse(window.store._langs)
   }