@electerm/electerm-react 1.37.81 → 1.37.92

package/client/common/constants.js

@@ -42,7 +42,7 @@ export const maxHistory = 50
 export const maxTransport = 5
 export const maxSftpHistory = 20
 export const maxZoom = 8
-export const minZoom = 0.25
+export const minZoom = 0.5
 export const extraTabWidth = 113
 // export const maxTabs = 20
 
@@ -336,3 +336,4 @@ export const instSftpKeys = [
   'readFile',
   'writeFile'
 ]
+export const cwdId = '=__+__'

package/client/common/default-setting.js

@@ -40,5 +40,7 @@ export default {
   screenReaderMode: false,
   autoRefreshWhenSwitchToSftp: false,
   hideSshConfig: false,
-  addTimeStampToTermLog: false
+  addTimeStampToTermLog: false,
+  sftpPathFollowSsh: false,
+  keepaliveInterval: 0
 }

package/client/components/footer/footer-entry.jsx

@@ -1,6 +1,5 @@
 import { Component } from '../common/react-subx'
 import {
-  Tooltip,
   Select
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
@@ -109,14 +108,10 @@ export default class SystemMenu extends Component {
     }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
-        <Tooltip
-          title='Terminal Info'
-        >
-          <InfoCircleOutlined
-            onClick={this.handleInfoPanel}
-            className='pointer font18 terminal-info-icon'
-          />
-        </Tooltip>
+        <InfoCircleOutlined
+          onClick={this.handleInfoPanel}
+          className='pointer font18 terminal-info-icon'
+        />
       </div>
     )
   }

package/client/components/session/session.jsx

@@ -9,9 +9,12 @@ import {
   BorderHorizontalOutlined,
   CloseSquareFilled,
   SearchOutlined,
-  FullscreenOutlined
+  FullscreenOutlined,
+  PaperClipOutlined
 } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import {
+  Tooltip
+} from 'antd'
 import { last, findIndex, pick } from 'lodash-es'
 import generate from '../../common/uid'
 import copy from 'json-deep-copy'
@@ -72,6 +75,8 @@ export default class SessionWrapper extends Component {
     this.state = {
       pid: null,
       enableSftp: false,
+      cwd: '',
+      sftpPathFollowSsh: !!props.config.sftpPathFollowSsh,
       splitDirection: terminalSplitDirectionMap.horizontal,
       activeSplitId,
       infoPanelPinned: false,
@@ -89,14 +94,22 @@ export default class SessionWrapper extends Component {
     // this.initEvent()
   }
 
-  // isActive () {
-  //   const {
-  //     tab,
-  //     currentTabId
-  //   } = this.props
-  //   return currentTabId === tab.id &&
-  //     tab.pane === paneMap.terminal
-  // }
+  setCwd = (cwd, tid) => {
+    this.setState(old => {
+      return {
+        cwd,
+        terminals: old.terminals.map(t => {
+          if (t.id === tid) {
+            return {
+              ...t,
+              cwd
+            }
+          }
+          return t
+        })
+      }
+    })
+  }
 
   handleShowInfo = (infoPanelProps) => {
     this.setState({
@@ -111,6 +124,12 @@ export default class SessionWrapper extends Component {
     })
   }
 
+  toggleCheckSftpPathFollowSsh = () => {
+    this.setState({
+      sftpPathFollowSsh: !this.state.sftpPathFollowSsh
+    })
+  }
+
   hideInfoPanel = () => {
     this.setState({
       showInfo: false
@@ -266,7 +285,8 @@ export default class SessionWrapper extends Component {
       activeSplitId,
       splitDirection,
       sessionOptions,
-      sessionId
+      sessionId,
+      sftpPathFollowSsh
     } = this.state
     const {
       pane
@@ -297,6 +317,7 @@ export default class SessionWrapper extends Component {
                 ...this.props,
                 ...t,
                 activeSplitId,
+                sftpPathFollowSsh,
                 themeConfig,
                 pane,
                 ...pick(
@@ -308,7 +329,8 @@ export default class SessionWrapper extends Component {
                     'setSessionState',
                     'handleShowInfo',
                     'onChangePane',
-                    'hideInfoPanel'
+                    'hideInfoPanel',
+                    'setCwd'
                   ]),
                 ...this.computePosition(t.position / 10)
               }
@@ -330,22 +352,34 @@ export default class SessionWrapper extends Component {
   }
 
   renderSftp = () => {
-    const { sessionOptions, sessionId, pid, enableSftp } = this.state
+    const {
+      sessionOptions,
+      sessionId,
+      pid,
+      enableSftp,
+      sftpPathFollowSsh,
+      cwd
+    } = this.state
     const { pane } = this.props.tab
     const height = this.computeHeight()
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''
+    const exts = {
+      sftpPathFollowSsh,
+      cwd,
+      pid,
+      enableSftp,
+      sessionOptions,
+      height,
+      sessionId,
+      pane,
+      ...this.props
+    }
     return (
       <div className={cls}>
         <Sftp
-          pid={pid}
-          enableSftp={enableSftp}
-          sessionOptions={sessionOptions}
-          height={height}
-          sessionId={sessionId}
-          pane={pane}
-          {...this.props}
+          {...exts}
         />
       </div>
     )
@@ -365,7 +399,7 @@ export default class SessionWrapper extends Component {
   renderSearchIcon = () => {
     const title = e('search')
     return (
-      <Tooltip title={title}>
+      <Tooltip title={title} placement='bottomLeft'>
         <SearchOutlined
           className='mg1r icon-info font16 iblock pointer spliter'
           onClick={this.handleOpenSearch}
@@ -377,7 +411,7 @@ export default class SessionWrapper extends Component {
   fullscreenIcon = () => {
     const title = e('fullscreen')
     return (
-      <Tooltip title={title}>
+      <Tooltip title={title} placement='bottomLeft'>
         <FullscreenOutlined
           className='mg1r icon-info font16 iblock pointer spliter term-fullscreen-control1'
           onClick={this.handleFullscreen}
@@ -387,7 +421,7 @@ export default class SessionWrapper extends Component {
   }
 
   renderControl = () => {
-    const { splitDirection, terminals } = this.state
+    const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
     const { pane } = props.tab
     const termType = props.tab?.type
@@ -413,6 +447,16 @@ export default class SessionWrapper extends Component {
     if (isSsh || isLocal) {
       controls.push(isSsh ? paneMap.sftp : paneMap.fileManager)
     }
+    const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
+    const checkProps = {
+      onClick: this.toggleCheckSftpPathFollowSsh,
+      className: classnames(
+        'sftp-follow-ssh-icon',
+        {
+          active: sftpPathFollowSsh
+        }
+      )
+    }
     return (
       <div
         className='terminal-control fix'
@@ -442,6 +486,17 @@ export default class SessionWrapper extends Component {
             })
           }
         </div>
+        {
+          isSsh || isLocal
+            ? (
+              <Tooltip title={checkTxt}>
+                <span {...checkProps}>
+                  <PaperClipOutlined />
+                </span>
+              </Tooltip>
+              )
+            : null
+        }
         {
           pane === paneMap.terminal
             ? (
@@ -461,6 +516,7 @@ export default class SessionWrapper extends Component {
                 }
                 <Tooltip
                   title={`${e('split')}`}
+                  placement='bottomLeft'
                 >
                   <Icon1
                     className={cls1}
@@ -469,6 +525,7 @@ export default class SessionWrapper extends Component {
                 </Tooltip>
                 <Tooltip
                   title={e('changeDirection')}
+                  placement='bottomLeft'
                 >
                   <Icon2
                     className={cls2}

package/client/components/session/session.styl

@@ -16,6 +16,7 @@
   position relative
   display inline-block
 
+.sftp-follow-ssh-icon
 .type-tab
   display inline-block
   vertical-align middle
@@ -31,6 +32,7 @@
   &.active
     .type-tab-line
       display inline-block
+
 .is-transporting
   .type-tab.sftp
     .type-tab-line

package/client/components/session/sessions.jsx

@@ -340,6 +340,8 @@ class Sessions extends Component {
         currentTabId,
         tab: toSimpleObj(tab),
         ...pick(store, [
+          'fileOperation',
+          'file',
           'height',
           'width',
           'activeTerminalId',
@@ -382,7 +384,6 @@ class Sessions extends Component {
       currentTabId,
       config,
       ...pick(store, [
-        'fileOperation',
         'height',
         'width',
         'activeTerminalId',

package/client/components/setting-panel/setting-common.jsx

@@ -320,23 +320,16 @@ export default class SettingCommon extends Component {
     const defaultValue = defaultSettings[name]
     const onChange = (e) => this.onChangeValue(e.target.value, name)
     const onChangeArgs = (v) => this.onChangeValue(v, agrsProp)
-    const style = {
-      style: {
-        width: '40%'
-      }
-    }
     const styleArg = {
       style: {
-        width: '40%',
-        marginLeft: '3px'
+        width: '40%'
       }
     }
     return (
       <div className='pd2b'>
-        <Space.Compact>
+        <Space.Compact block>
           <Input
             value={value}
-            {...style}
             onChange={onChange}
             placeholder={defaultValue}
           />

package/client/components/sftp/sftp-entry.jsx

@@ -111,6 +111,12 @@ export default class Sftp extends Component {
         selectedFiles: []
       })
     }
+    if (
+      this.props.sftpPathFollowSsh &&
+      prevProps.cwd !== this.props.cwd
+    ) {
+      this.updateCwd(this.props.cwd)
+    }
   }
 
   componentWillUnmount () {
@@ -196,7 +202,42 @@ export default class Sftp extends Component {
       this.props.pane === paneMap.fileManager
   }
 
+  getCwdLocal = () => {
+    if (
+      !this.shouldRenderRemote() &&
+      this.props.sftpPathFollowSsh &&
+      this.props.cwd
+    ) {
+      return this.props.cwd
+    }
+  }
+
+  updateCwd = (cwd) => {
+    if (!this.state.inited) {
+      return
+    }
+    const type = this.shouldRenderRemote()
+      ? typeMap.remote
+      : typeMap.local
+    // this.setState({
+    //   [`${type}PathTemp`]: cwd
+    // }, () => {
+    //   this.onGoto(
+    //     type
+    //   )
+    // })
+    const n = `${type}Path`
+    const nt = n + 'Temp'
+    this.setState({
+      [n]: cwd,
+      [nt]: cwd
+    }, () => this[`${type}List`]())
+  }
+
   getPwd = async (username) => {
+    if (this.props.sftpPathFollowSsh && this.props.cwd) {
+      return this.props.cwd
+    }
     const home = await runCmd(
       this.props.pid,
       this.props.sessionId,
@@ -427,16 +468,19 @@ export default class Sftp extends Component {
   }
 
   initData = async () => {
-    const { props } = this
-    const host = props.tab?.host &&
-      props.tab?.type !== terminalSshConfigType &&
-      props.tab?.type !== terminalSerialType
-    if (host) {
+    if (this.shouldRenderRemote()) {
       this.initRemoteAll()
     }
     this.initLocalAll()
   }
 
+  shouldRenderRemote = () => {
+    const { props } = this
+    return props.tab?.host &&
+      props.tab?.type !== terminalSshConfigType &&
+      props.tab?.type !== terminalSerialType
+  }
+
   initLocalAll = () => {
     this.localListOwner()
     this.localList()
@@ -699,7 +743,10 @@ export default class Sftp extends Component {
     )
     try {
       const noPathInit = localPathReal || this.state.localPath
-      const localPath = noPathInit || this.props.tab.startDirectoryLocal || window.pre.homeOrtmp
+      const localPath = noPathInit ||
+        this.getCwdLocal() ||
+        this.props.tab.startDirectoryLocal ||
+        window.pre.homeOrTmp
       const locals = await fs.readdirAsync(localPath)
       const local = []
       for (const name of locals) {
@@ -1010,8 +1057,7 @@ export default class Sftp extends Component {
     const {
       height, width
     } = this.props
-    const shouldRenderRemote = this.props.tab?.authType &&
-      this.props.tab?.enableSftp !== false
+    const shouldRenderRemote = this.shouldRenderRemote()
     if (!shouldRenderRemote) {
       return (
         this.renderSection(arr[0], {

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

@@ -5,6 +5,7 @@
 
 import React from 'react'
 import { shortcutExtend } from './shortcut-handler.js'
+import { throttle } from 'lodash-es'
 
 class ShortcutControl extends React.PureComponent {
   componentDidMount () {
@@ -40,33 +41,33 @@ class ShortcutControl extends React.PureComponent {
     x && x.click()
   }
 
-  zoominShortcut = (e) => {
+  zoominShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.zoom(0.25, true)
-  }
+  }, 1000)
 
-  zoomoutShortcut = (e) => {
+  zoomoutShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.zoom(-0.25, true)
-  }
+  }, 1000)
 
-  zoominTerminalShortcut = (event) => {
+  zoominTerminalShortcut = throttle((event) => {
     if (window.store.inActiveTerminal) {
       window.store.zoomTerminal(event.wheelDeltaY || 120)
     } else {
       const plus = 0.2
       window.store.zoom(plus, true)
     }
-  }
+  }, 1000)
 
-  zoomoutTerminalShortcut = (event) => {
+  zoomoutTerminalShortcut = throttle((event) => {
     if (window.store.inActiveTerminal) {
       window.store.zoomTerminal(event.wheelDeltaY || -120)
     } else {
       const plus = -0.2
       window.store.zoom(plus, true)
     }
-  }
+  }, 1000)
 
   render () {
     return null

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

@@ -53,21 +53,27 @@ export function shortcutExtend (Cls) {
       shiftKey,
       metaKey,
       altKey,
-      wheelDeltaY
+      wheelDeltaY,
+      type,
+      key
     } = event
-    if (this.isTerm) {
-      const keymap = [
-        { key: 'Backspace', shiftKey: false, mapCode: 8 },
-        { key: 'Backspace', shiftKey: true, mapCode: 127 }
-      ]
-      if (event.type === 'keydown') {
-        for (const i in keymap) {
-          if (keymap[i].key === event.key && keymap[i].shiftKey === shiftKey) {
-            this.socket.send(String.fromCharCode(keymap[i].mapCode))
-            return false
-          }
-        }
+    if (key === 'Backspace' && this.isTerm && type === 'keydown') {
+      const now = Date.now()
+      if (!this.lastTimePressDel) {
+        this.lastTimePressDel = now
       }
+      const timer = now - this.lastTimePressDel
+      const count = Math.ceil(timer / 800)
+      let char = String.fromCharCode(
+        shiftKey ? 127 : 8
+      )
+      char = new Array(count).fill(char).join('')
+      this.socket.send(
+        char
+      )
+      return false
+    } else if (key === 'Backspace' && this.isTerm && type === 'keyup') {
+      delete this.lastTimePressDel
     }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')

package/client/components/tabs/app-drag.jsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+
 export default function AppDrag (props) {
   function canOperate (e) {
     const {
@@ -37,6 +39,10 @@ export default function AppDrag (props) {
       window.pre.runGlobalAsync('maximize')
     }
   }
+
+  useEffect(() => {
+    window.addEventListener('contextmenu', onMouseUp)
+  }, [])
   return (
     <div
       className='app-drag'

package/client/components/tabs/index.jsx

@@ -219,7 +219,19 @@ export default class Tabs extends React.Component {
     )
   }
 
-  render () {
+  renderContent () {
+    const { config } = this.props
+    if (config.useSystemTitleBar) {
+      return this.renderContentInner()
+    }
+    return (
+      <AppDrag>
+        {this.renderContentInner()}
+      </AppDrag>
+    )
+  }
+
+  renderContentInner () {
     const { tabs = [], width } = this.props
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
@@ -230,46 +242,51 @@ export default class Tabs extends React.Component {
     const style = {
       width: width - windowControlWidth - 86
     }
+    return (
+      <div
+        className='tabs-inner'
+        style={style}
+      >
+        <div
+          style={{
+            left
+          }}
+        />
+        <div
+          className='tabs-wrapper relative'
+          style={{
+            width: tabsWidthAll + extraTabWidth + 10
+          }}
+          onDoubleClick={this.handleAdd}
+        >
+          {
+            tabs.map((tab, i) => {
+              const isLast = i === len - 1
+              return (
+                <Tab
+                  {...this.props}
+                  tab={tab}
+                  isLast={isLast}
+                  key={tab.id}
+                />
+              )
+            })
+          }
+          {
+            !overflow
+              ? this.renderAddBtn()
+              : null
+          }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const overflow = this.isOverflow()
     return (
       <div className='tabs' ref={this.tabsRef}>
-        <AppDrag>
-          <div
-            className='tabs-inner'
-            style={style}
-          >
-            <div
-              style={{
-                left
-              }}
-            />
-            <div
-              className='tabs-wrapper relative'
-              style={{
-                width: tabsWidthAll + extraTabWidth + 10
-              }}
-              onDoubleClick={this.handleAdd}
-            >
-              {
-                tabs.map((tab, i) => {
-                  const isLast = i === len - 1
-                  return (
-                    <Tab
-                      {...this.props}
-                      tab={tab}
-                      isLast={isLast}
-                      key={tab.id}
-                    />
-                  )
-                })
-              }
-              {
-                !overflow
-                  ? this.renderAddBtn()
-                  : null
-              }
-            </div>
-          </div>
-        </AppDrag>
+        {this.renderContent()}
         <WindowControl
           store={window.store}
         />

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

@@ -2,6 +2,7 @@
  * customize AttachAddon
  */
 import { AttachAddon } from 'xterm-addon-attach'
+import strip from '@electerm/strip-ansi'
 
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, options, encode, isWindowsShell) {
@@ -22,7 +23,31 @@ export default class AttachAddonCustom extends AttachAddon {
       const fileReader = new FileReader()
       fileReader.addEventListener('load', () => {
         const str = this.decoder.decode(fileReader.result)
-        terminal.write(str)
+        if (terminal.parent.props.sftpPathFollowSsh && terminal.buffer.active.type !== 'alternate') {
+          const {
+            cwdId
+          } = terminal
+          const nss = str.split('\r')
+          const nnss = []
+          for (const str1 of nss) {
+            const ns = strip(str1).trim()
+            if (ns.includes(cwdId) && ns.includes('$PWD')) {
+              nnss.push(str1.replace(`echo "${cwdId}$PWD"`, ''))
+            } else if (
+              (cwdId && ns.startsWith(cwdId))
+            ) {
+              delete terminal.cwdId
+              const cwd = ns.replace(cwdId, '').trim()
+              terminal.parent.setCwd(cwd)
+              nnss.push('\x1b[2A\x1b[0J')
+            } else {
+              nnss.push(str1)
+            }
+          }
+          terminal.write(nnss.join('\r'))
+        } else {
+          terminal.write(str)
+        }
       })
       fileReader.readAsArrayBuffer(new window.Blob([data]))
     }

package/client/components/terminal/index.jsx

@@ -25,7 +25,9 @@ import {
   transferTypeMap,
   terminalActions,
   commonActions,
-  rendererTypes
+  rendererTypes,
+  cwdId,
+  isMac
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, copy } from '../../common/clipboard'
@@ -76,8 +78,6 @@ class Term extends Component {
 
   isTerm = true
 
-  dataCache = ''
-
   componentDidMount () {
     this.initTerminal()
     this.initEvt()
@@ -130,6 +130,7 @@ class Term extends Component {
   }
 
   componentWillUnmount () {
+    delete this.term.parent
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
     })
@@ -242,6 +243,19 @@ class Term extends Component {
     this.tryInsertSelected()
   }
 
+  pasteShortcut = (e) => {
+    if (isMac) {
+      return true
+    }
+    if (!this.isRemote()) {
+      return true
+    }
+    if (this.term.buffer.active.type !== 'alternate') {
+      return false
+    }
+    return true
+  }
+
   showNormalBufferShortcut = (e) => {
     e.stopPropagation()
     this.openNormalBuffer()
@@ -762,8 +776,22 @@ class Term extends Component {
     const str = this.serializeAddon.serialize()
     const arr = strip(str).split(/ +/)
     const len = arr.length
-    const last = arr[len - 1]
-    this.dataCache = last
+    return arr[len - 1]
+  }
+
+  getCwd = () => {
+    if (
+      this.props.sftpPathFollowSsh &&
+      this.term.buffer.active.type !== 'alternate'
+    ) {
+      const cmd = `\recho "${cwdId}$PWD"\r`
+      this.term.cwdId = cwdId
+      this.socket.send(cmd)
+    }
+  }
+
+  setCwd = (cwd) => {
+    this.props.setCwd(cwd, this.state.id)
   }
 
   onData = (d) => {
@@ -771,9 +799,10 @@ class Term extends Component {
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      this.getCmd()
-      const data = this.dataCache
-      this.dataCache = ''
+      const data = this.getCmd()
+      if (this.term.buffer.active.type !== 'alternate') {
+        setTimeout(this.getCwd, 200)
+      }
       const exitCmds = [
         'exit',
         'logout'
@@ -822,6 +851,7 @@ class Term extends Component {
 
     // term.onLineFeed(this.onLineFeed)
     // term.onTitleChange(this.onTitleChange)
+    term.parent = this
     term.onSelectionChange(this.onSelection)
     term.open(document.getElementById(id), true)
     this.loadRenderer(term, config)

package/client/store/event.js

@@ -48,6 +48,7 @@ export default Store => {
 
   Store.prototype.onBlur = function () {
     window.focused = false
+    window.pre.runSync('windowMove', false)
   }
 
   Store.prototype.selectall = function () {

package/package.json

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

package/client/components/terminal-info/index.jsx

@@ -1,25 +0,0 @@
-/**
- * show terminal info
- * inluding id log path, and system info for remote session
- */
-
-import { InfoCircleOutlined } from '@ant-design/icons'
-
-import { Tooltip } from 'antd'
-import './terminal-info.styl'
-
-export default function TerminalInfoIndex (props) {
-  const pops = {
-    onClick: props.showInfoPanel,
-    className: 'pointer font18 terminal-info-icon'
-  }
-  return (
-    <Tooltip
-      title='Terminal Info'
-    >
-      <InfoCircleOutlined
-        {...pops}
-      />
-    </Tooltip>
-  )
-}