@electerm/electerm-react 1.37.93 → 1.37.96

package/client/common/constants.js

@@ -306,6 +306,7 @@ export const expandedKeysLsKey = 'expanded-keys'
 export const checkedKeysLsKey = 'checked-keys'
 export const quickCommandLabelsLsKey = 'quick-command-labels'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
+export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
 export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'

package/client/common/create-title.jsx

@@ -33,6 +33,9 @@ export default function createTitle (res) {
 
 export function createTitleTag (obj) {
   const { color } = obj
+  if (!color) {
+    return null
+  }
   const styleTag = color
     ? { color }
     : {}

package/client/common/default-setting.js

@@ -42,5 +42,6 @@ export default {
   hideSshConfig: false,
   addTimeStampToTermLog: false,
   sftpPathFollowSsh: false,
-  keepaliveInterval: 0
+  keepaliveInterval: 0,
+  backspaceMode: '^?'
 }

package/client/components/session/session.jsx

@@ -10,7 +10,8 @@ import {
   CloseSquareFilled,
   SearchOutlined,
   FullscreenOutlined,
-  PaperClipOutlined
+  PaperClipOutlined,
+  CloseOutlined
 } from '@ant-design/icons'
 import {
   Tooltip
@@ -84,6 +85,7 @@ export default class SessionWrapper extends Component {
       sessionOptions: null,
       sessionId: generate(),
       terminals: terminals.slice(0, 1),
+      delKeyPressed: false,
       showInfo: false,
       infoPanelProps: {}
     }
@@ -94,6 +96,31 @@ export default class SessionWrapper extends Component {
     // this.initEvent()
   }
 
+  componentWillUnmount () {
+    clearTimeout(this.backspaceKeyPressedTimer)
+  }
+
+  onDelKeyPressed = () => {
+    this.setState({
+      delKeyPressed: true
+    })
+    this.backspaceKeyPressedTimer = setTimeout(() => {
+      this.setState({
+        delKeyPressed: false
+      })
+    }, 5000)
+  }
+
+  handleChangeDelMode = (backspaceMode) => {
+    this.setState({
+      backspaceMode
+    })
+  }
+
+  handleDismissDelKeyTip = () => {
+    window.store.dismissDelKeyTip()
+  }
+
   setCwd = (cwd, tid) => {
     this.setState(old => {
       return {
@@ -330,7 +357,8 @@ export default class SessionWrapper extends Component {
                     'handleShowInfo',
                     'onChangePane',
                     'hideInfoPanel',
-                    'setCwd'
+                    'setCwd',
+                    'onDelKeyPressed'
                   ]),
                 ...this.computePosition(t.position / 10)
               }
@@ -420,6 +448,21 @@ export default class SessionWrapper extends Component {
     )
   }
 
+  renderDelTip = (isSsh) => {
+    if (!isSsh || this.props.hideDelKeyTip || !this.state.delKeyPressed) {
+      return null
+    }
+    return (
+      <div className='type-tab'>
+        <span className='mg1r'>Try <b>Shift + Backspace</b>?</span>
+        <CloseOutlined
+          onClick={this.handleDismissDelKeyTip}
+          className='pointer'
+        />
+      </div>
+    )
+  }
+
   renderControl = () => {
     const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
@@ -497,6 +540,9 @@ export default class SessionWrapper extends Component {
               )
             : null
         }
+        {
+          this.renderDelTip(pane === paneMap.terminal)
+        }
         {
           pane === paneMap.terminal
             ? (

package/client/components/session/sessions.jsx

@@ -340,6 +340,7 @@ class Sessions extends Component {
         currentTabId,
         tab: toSimpleObj(tab),
         ...pick(store, [
+          'hideDelKeyTip',
           'fileOperation',
           'file',
           'height',

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

@@ -70,6 +70,9 @@ export default class SettingTerminal extends Component {
     })
   }
 
+  handleChangeDelMode = v => this.onChangeValue(v, 'backspaceMode')
+  handleChangeRenderType = v => this.onChangeValue(v, 'renderType')
+
   handleChangeFont = (values) => {
     this.onChangeValue(
       values.join(', '),
@@ -401,6 +404,7 @@ export default class SettingTerminal extends Component {
     }
     const {
       rendererType,
+      backspaceMode = '^?',
       keywords = [{ color: 'red' }]
     } = this.props.config
     const {
@@ -436,7 +440,7 @@ export default class SettingTerminal extends Component {
         <div className='pd2b'>
           <span className='inline-title mg1r'>{e('rendererType')}</span>
           <Select
-            onChange={v => this.onChangeValue(v, 'rendererType')}
+            onChange={this.handleChangeRenderType}
             value={rendererType}
             popupMatchSelectWidth={false}
           >
@@ -501,6 +505,20 @@ export default class SettingTerminal extends Component {
             'ctrlOrMetaOpenTerminalLink'
           ].map(this.renderToggle)
         }
+        <div className='pd1b'>{e('terminalBackSpaceMode')}</div>
+        <Select
+          onChange={this.handleChangeDelMode}
+          value={backspaceMode}
+          popupMatchSelectWidth={false}
+        >
+          {
+            ['^?', '^H'].map(id => {
+              return (
+                <Option key={id} value={id}>{id}</Option>
+              )
+            })
+          }
+        </Select>
         {this.renderReset()}
       </div>
     )

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

@@ -13,33 +13,33 @@ class ShortcutControl extends React.PureComponent {
     window.addEventListener('mousewheel', this.handleKeyboardEvent.bind(this))
   }
 
-  prevTabShortcut = (e) => {
+  prevTabShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.clickPrevTab()
-  }
+  }, 500)
 
-  nextTabShortcut = (e) => {
+  nextTabShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.clickNextTab()
-  }
+  }, 500)
 
-  newBookmarkShortcut = (e) => {
+  newBookmarkShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.onNewSsh()
-  }
+  }, 500)
 
-  togglefullscreenShortcut = (e) => {
+  togglefullscreenShortcut = throttle((e) => {
     e.stopPropagation()
     const x = document.querySelector('.term-fullscreen-control') ||
     document.querySelector('.session-current .term-fullscreen-control1')
     x && x.click()
-  }
+  }, 500)
 
-  splitShortcut = (e) => {
+  splitShortcut = throttle((e) => {
     e.stopPropagation()
     const x = document.querySelector('.session-current .icon-split')
     x && x.click()
-  }
+  }, 1000)
 
   zoominShortcut = throttle((e) => {
     e.stopPropagation()

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

@@ -3,7 +3,6 @@ import shortcutsDefaultsGen from './shortcuts-defaults.js'
 import {
   isMacJs
 } from '../../common/constants'
-import { throttle } from 'lodash-es'
 
 function buildConfig (config, filter = d => d) {
   const defs = shortcutsDefaultsGen().filter(filter)
@@ -46,7 +45,7 @@ function buildConfigForSearch (config) {
 }
 
 export function shortcutExtend (Cls) {
-  Cls.prototype.handleKeyboardEvent = throttle(function (event) {
+  Cls.prototype.handleKeyboardEvent = function (event) {
     const {
       code,
       ctrlKey,
@@ -57,28 +56,13 @@ export function shortcutExtend (Cls) {
       type,
       key
     } = event
-    if (key === 'Backspace' && this.isTerm && type === 'keydown') {
-      const now = Date.now()
-      if (!this.lastTimePressDel) {
-        this.lastTimePressDel = now
-      }
-      const timer = now - this.lastTimePressDel
-      let count = Math.ceil(timer / 800)
-      if (count <= 0) {
-        count = 1
-      }
-      let char = String.fromCharCode(
-        shiftKey ? 127 : 8
-      )
-      console.log('char1', JSON.stringify(char), count)
-      char = new Array(count).fill(char).join('')
-      console.log('char', JSON.stringify(char))
-      this.socket.send(
-        char
-      )
+    if (this.isTerm && key === 'Backspace' && this.isTerm && type === 'keydown') {
+      this.props.onDelKeyPressed()
+      const delKey = this.props.config.backspaceMode === '^?' ? 8 : 127
+      const altDelDelKey = delKey === 8 ? 127 : 8
+      const char = String.fromCharCode(shiftKey ? delKey : altDelDelKey)
+      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')
@@ -110,7 +94,7 @@ export function shortcutExtend (Cls) {
         }
       }
     }
-  }, 300)
+  }
   return Cls
 }
 

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

@@ -49,6 +49,7 @@ export default function AppDrag (props) {
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       onDoubleClick={onDoubleClick}
+      onMouseLeave={onMouseUp}
     >
       {props.children}
     </div>

package/client/components/terminal/index.jsx

@@ -261,16 +261,6 @@ class Term extends Component {
     this.openNormalBuffer()
   }
 
-  prevTabShortcut = throttle((e) => {
-    e.stopPropagation()
-    window.store.clickPrevTab()
-  }, 300)
-
-  nextTabShortcut = throttle((e) => {
-    e.stopPropagation()
-    window.store.clickNextTab()
-  }, 300)
-
   handleEvent = (e) => {
     const {
       keyword,
@@ -748,11 +738,6 @@ class Term extends Component {
     })
   }, 1000)
 
-  // onSocketData = (a) => {
-  //   console.log('onSocketData', a)
-  //   runIdle(this.notifyOnData)
-  // }
-
   parse (rawText) {
     let result = ''
     const len = rawText.length

package/client/store/common.js

@@ -10,7 +10,8 @@ import {
   tabActions,
   modals,
   leftSidebarWidthKey,
-  rightSidebarWidthKey
+  rightSidebarWidthKey,
+  dismissDelKeyTipLsKey
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 
@@ -150,4 +151,8 @@ export default Store => {
     ls.setItem(rightSidebarWidthKey, v)
     window.store.rightSidebarWidth = v
   }
+  Store.prototype.dismissDelKeyTip = function (v) {
+    ls.setItem(dismissDelKeyTipLsKey, 'y')
+    window.store.hideDelKeyTip = true
+  }
 }

package/client/store/init-state.js

@@ -17,7 +17,8 @@ import {
   checkedKeysLsKey,
   localAddrBookmarkLsKey,
   leftSidebarWidthKey,
-  rightSidebarWidthKey
+  rightSidebarWidthKey,
+  dismissDelKeyTipLsKey
 } from '../common/constants'
 import { buildDefaultThemes, buildNewTheme } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
@@ -185,6 +186,7 @@ export default () => {
     innerWidth: window.innerWidth,
     height: 500,
     isMaximized: window.pre.runSync('isMaximized'),
-    terminalFullScreen: false
+    terminalFullScreen: false,
+    hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y'
   }
 }

package/package.json

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