@electerm/electerm-react 1.37.93 → 1.37.106

package/client/common/constants.js

@@ -37,7 +37,6 @@ export const contextMenuWidth = 280
 export const contextMenuPaddingTop = 10
 export const sftpControlHeight = 28 + 42 + 33 + 46
 export const sidebarWidth = 43
-export const sidebarPanelWidth = 300
 export const maxHistory = 50
 export const maxTransport = 5
 export const maxSftpHistory = 20
@@ -306,6 +305,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

@@ -8,7 +8,7 @@ export default {
   scrollback: 3000,
   onStartSessions: [],
   fontSize: 16,
-  fontFamily: 'mono, courier-new, courier, monospace',
+  fontFamily: 'Fira Code, mono, courier-new, courier, monospace',
   execWindows: 'System32/WindowsPowerShell/v1.0/powershell.exe',
   execMac: 'zsh',
   execLinux: 'bash',
@@ -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 {
@@ -272,11 +299,10 @@ export default class SessionWrapper extends Component {
       infoPanelPinned,
       showInfo
     } = this.state
-    if (!infoPanelPinned || !showInfo) {
-      return this.props.width
-    }
-    const { rightSidebarWidth, width } = this.props
-    return width - rightSidebarWidth
+    const { rightSidebarWidth, width, leftSidebarWidth, pinned, openedSideBar } = this.props
+    const rt = infoPanelPinned && showInfo ? rightSidebarWidth : 0
+    const lt = pinned && openedSideBar ? leftSidebarWidth : 0
+    return width - rt - lt - 42
   }
 
   renderTerminals = () => {
@@ -330,7 +356,8 @@ export default class SessionWrapper extends Component {
                     'handleShowInfo',
                     'onChangePane',
                     'hideInfoPanel',
-                    'setCwd'
+                    'setCwd',
+                    'onDelKeyPressed'
                   ]),
                 ...this.computePosition(t.position / 10)
               }
@@ -420,6 +447,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 +539,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',
@@ -349,7 +350,10 @@ class Sessions extends Component {
           'tabsHeight',
           'appPath',
           'topMenuHeight',
-          'rightSidebarWidth'
+          'rightSidebarWidth',
+          'leftSidebarWidth',
+          'pinned',
+          'openedSideBar'
         ]),
         config,
         ...pick(this, [
@@ -410,7 +414,7 @@ class Sessions extends Component {
 
   renderSessionsWrap = () => {
     const { leftSidebarWidth, openedSideBar } = this.props.store
-    const w = leftSidebarWidth + 43
+    const w = leftSidebarWidth + 42
     const ptp = openedSideBar
       ? {
           className: 'sessions',

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,24 @@ 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.term &&
+      key === 'Backspace' &&
+      type === 'keydown' &&
+      !altKey &&
+      !ctrlKey
+    ) {
+      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
+    } else if (
+      this.term &&
+      this.term.buffer.active.type === 'alternate'
+    ) {
+      return true
     }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
@@ -103,14 +98,15 @@ export function shortcutExtend (Cls) {
       if (conf.shortcut.split(',').includes(r)) {
         if (this[funcName]) {
           return this[funcName](event)
-        } else if (this.isTerm && conf.readonly) {
+        } else if (this.term && conf.readonly) {
           return true
         } else {
           return false
         }
       }
     }
-  }, 300)
+    return !!this.term
+  }
   return Cls
 }
 

package/client/components/sidebar/side-panel.jsx

@@ -19,6 +19,7 @@ export default class SidePanel extends PureComponent {
       nw = 600
     }
     this.props.setLeftSidePanelWidth(nw)
+    window.store.onResize()
     window.removeEventListener('mouseup', this.handleMouseup)
     window.removeEventListener('mousemove', this.handleMousemove)
   }

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

@@ -5,10 +5,11 @@ export default function AppDrag (props) {
     const {
       target
     } = e
+    const { classList = [] } = target || {}
     if (
-      target instanceof window.SVGElement ||
-      target.classList.contains('tab-title') ||
-      target.classList.contains('ant-tooltip-inner')
+      !classList.contains('app-drag') &&
+      !classList.contains('tabs-inner') &&
+      !classList.contains('tabs-wrapper')
     ) {
       window.pre.runSync('windowMove', false)
       return false
@@ -17,6 +18,7 @@ export default function AppDrag (props) {
   }
 
   function onMouseDown (e) {
+    e.stopPropagation()
     if (canOperate(e)) {
       window.pre.runSync('windowMove', true)
     }
@@ -27,8 +29,9 @@ export default function AppDrag (props) {
   }
 
   function onDoubleClick (e) {
+    e.stopPropagation()
     if (!canOperate(e)) {
-      return window.pre.runSync('windowMove', false)
+      return
     }
     const {
       isMaximized
@@ -49,6 +52,7 @@ export default function AppDrag (props) {
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       onDoubleClick={onDoubleClick}
+      onMouseLeave={onMouseUp}
     >
       {props.children}
     </div>

package/client/components/tabs/index.jsx

@@ -240,7 +240,7 @@ export default class Tabs extends React.Component {
       ? '100%'
       : tabsWidthAll
     const style = {
-      width: width - windowControlWidth - 86
+      width: width - windowControlWidth - 136
     }
     return (
       <div

package/client/components/terminal/index.jsx

@@ -76,8 +76,6 @@ class Term extends Component {
     }
   }
 
-  isTerm = true
-
   componentDidMount () {
     this.initTerminal()
     this.initEvt()
@@ -261,16 +259,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 +736,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/components/terminal-info/content.jsx

@@ -110,7 +110,7 @@ export default class TerminalInfoContent extends PureComponent {
       draggable: false,
       style: {
         width: props.rightSidebarWidth,
-        top: props.topMenuHeight + props.tabsHeight + termControlHeight - 4
+        top: props.topMenuHeight + props.tabsHeight + termControlHeight
       }
     }
     return (

package/client/entry/index.jsx

@@ -2,6 +2,7 @@ import { render } from 'react-dom'
 import 'antd/dist/reset.css'
 import '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({

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/index.js

@@ -31,8 +31,6 @@ import { uniq } from 'lodash-es'
 import copy from 'json-deep-copy'
 import {
   settingMap,
-  sidebarWidth,
-  sidebarPanelWidth,
   paneMap,
   settingSyncId,
   settingShortcutsId,
@@ -93,8 +91,7 @@ class Store {
   }
 
   get width () {
-    return window.store.innerWidth - sidebarWidth -
-      (window.store.pinned ? sidebarPanelWidth : 0)
+    return window.store.innerWidth
   }
 
   get currentQuickCommands () {
@@ -226,7 +223,7 @@ class Store {
   }
 
   get topMenuHeight () {
-    return window.store.config.useSystemTitleBar ? 0 : 15
+    return 0
   }
 
   get tabsHeight () {

package/client/store/init-state.js

@@ -17,14 +17,15 @@ 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'
 
 const { prefix } = window
 const t = prefix('terminalThemes')
-const e = prefix('control')
+const e = prefix('common')
 const newQuickCommand = 'newQuickCommand'
 const q = prefix('quickCommands')
 
@@ -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.106",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",