@electerm/electerm-react 1.34.63 → 1.35.0

package/client/components/session/sessions.jsx

@@ -14,8 +14,6 @@ import {
   statusMap
 } from '../../common/constants'
 import newTerm, { updateCount } from '../../common/new-terminal'
-import keyControlPress from '../../common/key-control-pressed'
-import keyPressed from '../../common/key-pressed'
 import postMsg from '../../common/post-msg'
 import TermSearch from '../terminal/term-search'
 import Footer from '../footer/footer-entry'
@@ -23,12 +21,13 @@ import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
 import LogoElem from '../common/logo-elem'
 import { Button } from 'antd'
 import toSimpleObj from '../../common/to-simple-obj'
+import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
 
 const { prefix } = window
 const e = prefix('tabs')
 const c = prefix('control')
 
-export default class Sessions extends Component {
+class Sessions extends Component {
   state = {
     tabs: [],
     currentTabId: ''
@@ -40,16 +39,14 @@ export default class Sessions extends Component {
   }
 
   initShortcuts () {
-    window.addEventListener('keydown', e => {
-      if (keyControlPress(e) && keyPressed(e, 'w')) {
-        e.stopPropagation()
-        if (this.state.tabs.length > 1) {
-          this.delTab(
-            this.state.currentTabId
-          )
-        }
-      }
-    })
+    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
+  }
+
+  closeCurrentTabShortcut = (e) => {
+    e.stopPropagation()
+    this.delTab(
+      this.state.currentTabId
+    )
   }
 
   watch = () => {
@@ -418,11 +415,12 @@ export default class Sessions extends Component {
   }
 
   render () {
-    const { store } = this.props
+    const { store, config } = this.props
     const currentTab = this.getCurrentTab()
     const termProps = {
       currentTab,
-      store
+      store,
+      config
     }
     return [
       this.renderTabs(),
@@ -443,3 +441,5 @@ export default class Sessions extends Component {
     ]
   }
 }
+
+export default shortcutExtend(Sessions)

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

@@ -34,7 +34,6 @@ import createEditLangLink from '../../common/create-lang-edit-link'
 import mapper from '../../common/auto-complete-data-mapper'
 import StartSession from './start-session-select'
 import HelpIcon from '../common/help-icon'
-import fs from '../../common/fs'
 import delay from '../../common/wait.js'
 import './setting.styl'
 
@@ -186,6 +185,10 @@ export default class Setting extends Component {
     this.props.store.setTheme(id)
   }
 
+  handleCustomCss = (e) => {
+    this.onChangeValue(e.target.value, 'customCss')
+  }
+
   onChangeValue = (value, name) => {
     if (name === 'useSystemTitleBar') {
       message.info(e('useSystemTitleBarTip'), 5)
@@ -213,21 +216,18 @@ export default class Setting extends Component {
     )
   }
 
-  saveConfig = async (_ext) => {
-    const config = deepCopy(this.props.config)
-    const ext = deepCopy(_ext)
-    const update = Object.assign({}, config, deepCopy(_ext))
+  saveConfig = async (ext) => {
+    const { config } = this.props
     if (ext.hotkey && ext.hotkey !== config.hotkey) {
       const res = await window.pre.runGlobalAsync('changeHotkey', ext.hotkey)
       if (!res) {
         message.warning(e('hotkeyNotOk'))
-        update.config.hotkey = config.hotkey
-        ext.hotkey = config.hotkey
+        delete ext.hotkey
       } else {
         message.success(e('saved'))
       }
     }
-    this.props.store.setConfig(update)
+    this.props.store.setConfig(ext)
   }
 
   renderOption = (m, i) => {
@@ -663,29 +663,6 @@ export default class Setting extends Component {
     )
   }
 
-  handlePortable = async () => {
-    const {
-      appPath,
-      exePath
-    } = this.props.store
-    const from = osResolve(appPath, 'electerm', 'users')
-    const tar = osResolve(exePath, 'electerm', 'users')
-    const cmd = `xcopy /E /I /Q /Y "${from}" ${tar}`
-    const x = await fs.runWinCmd(cmd)
-      .catch(err => {
-        this.props.store.onError(err)
-        return false
-      })
-    if (x !== false) {
-      message.success(
-        `${e('dataTransferedTo')}: ${tar}`
-      )
-      setTimeout(
-        this.props.store.restart, 5000
-      )
-    }
-  }
-
   renderLoginPassAfter () {
     const {
       loginPass,
@@ -750,7 +727,8 @@ export default class Setting extends Component {
       hotkey,
       language,
       rendererType,
-      theme
+      theme,
+      customCss
     } = this.props.config
     const {
       appPath,
@@ -848,6 +826,16 @@ export default class Setting extends Component {
             }
           </Select>
         </div>
+
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('customCss')}</span>
+          <Input.TextArea
+            onChange={this.handleCustomCss}
+            value={customCss}
+            rows={3}
+          />
+        </div>
+
         <div className='pd2b'>
           <span className='inline-title mg1r'>{e('language')}</span>
           <Select

package/client/components/setting-panel/tab-settings.jsx

@@ -1,10 +1,12 @@
 import Setting from './setting'
 import SettingCol from './col'
 import SyncSetting from '../setting-sync/setting-sync'
+import Shortcuts from '../shortcuts/shortcuts'
 import List from './list'
 import {
   settingMap,
-  settingSyncId
+  settingSyncId,
+  settingShortcutsId
 } from '../../common/constants'
 
 export default function TabSettings (props) {
@@ -19,6 +21,15 @@ export default function TabSettings (props) {
     listProps,
     store
   } = props
+  let elem = null
+  const sid = settingItem.id
+  if (sid === settingSyncId) {
+    elem = <SyncSetting store={store} />
+  } else if (sid === settingShortcutsId) {
+    elem = <Shortcuts store={store} />
+  } else {
+    elem = <Setting {...listProps} config={store.config} />
+  }
   return (
     <div
       className='setting-tabs-setting'
@@ -27,15 +38,7 @@ export default function TabSettings (props) {
         <List
           {...listProps}
         />
-        {
-          settingItem.id === settingSyncId
-            ? (
-              <SyncSetting
-                store={store}
-              />
-              )
-            : <Setting {...listProps} config={store.config} />
-        }
+        {elem}
       </SettingCol>
     </div>
   )

package/client/components/sftp/transfer-tag.jsx

@@ -21,7 +21,7 @@ export default function TransferTag (props) {
   const typeFromTitle = e(typeFrom)
   const typeToTitle = e(typeTo)
   const title = error
-    ? `error: ${error}`
+    ? `[error: ${error}]`
     : ''
   return (
     <span className={'flex-child transfer-tag transfer-status-' + tagStatus} title={title}>
@@ -34,7 +34,7 @@ export default function TransferTag (props) {
       <span className='sftp-transfer-type'>
         {typeToTitle}
       </span>
-      <span className='mg1l'>[{title}]</span>
+      <span className='mg1l'>{title}</span>
     </span>
   )
 }

package/client/components/sftp/transport-action.jsx

@@ -222,6 +222,7 @@ export default function transportAction (props) {
       fromPathReal: transfer.fromPath,
       toPath: nTo,
       fromPath: p,
+      originalId: transfer.id,
       id: generate()
     }
     delete newTrans1.fromFile

package/client/components/shortcuts/get-key-char.js

@@ -0,0 +1,45 @@
+export function getKeyCharacter (code = '') {
+  const mapping = {
+    Backquote: '`',
+    Minus: '-',
+    Equal: '=',
+    BracketLeft: '[',
+    BracketRight: ']',
+    Backslash: '\\',
+    NumpadDivide: '/',
+    NumpadMultiply: '*',
+    NumpadSubtract: '-',
+    Numpad7: 'N7',
+    Numpad8: 'N8',
+    Numpad9: 'N9',
+    NumpadAdd: '+',
+    Numpad4: 'N4',
+    Numpad5: 'N5',
+    Numpad6: 'N6',
+    Numpad1: 'N1',
+    Numpad2: 'N2',
+    Numpad3: 'N3',
+    NumpadEnter: 'Enter',
+    Numpad0: 'N0',
+    NumpadDecimal: '.',
+    IntlBackslash: '\\',
+    ArrowLeft: '←',
+    ArrowUp: '↑',
+    ArrowRight: '→',
+    ArrowDown: '↓',
+    Semicolon: ';',
+    Quote: '\'',
+    Comma: ',',
+    Period: '.',
+    Slash: '/',
+    mouseWheelUp: '▲',
+    mouseWheelDown: '▼'
+  }
+  if (code.startsWith('Key') && code.length === 4) {
+    return code[3].toLowerCase()
+  } else if (code.startsWith('Digit') && code.length === 5) {
+    return code[5]
+  } else {
+    return mapping[code] || code
+  }
+}

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

@@ -0,0 +1,63 @@
+/**
+ * session tabs component
+ * @param {array} props.tabs {id, title}
+ */
+
+import React from 'react'
+import { shortcutExtend } from './shortcut-handler.js'
+
+class ShortcutControl extends React.PureComponent {
+  componentDidMount () {
+    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
+    window.addEventListener('mousewheel', this.handleKeyboardEvent.bind(this))
+  }
+
+  prevTabShortcut = (e) => {
+    e.stopPropagation()
+    window.store.clickPrevTab()
+  }
+
+  nextTabShortcut = (e) => {
+    e.stopPropagation()
+    window.store.clickNextTab()
+  }
+
+  newBookmarkShortcut = (e) => {
+    e.stopPropagation()
+    window.store.onNewSsh()
+  }
+
+  togglefullscreenShortcut = (e) => {
+    e.stopPropagation()
+    document.querySelector('.term-fullscreen-control').click()
+  }
+
+  zoominShortcut = (e) => {
+    e.stopPropagation()
+    window.store.zoom(0.25, true)
+  }
+
+  zoomoutShortcut = (e) => {
+    e.stopPropagation()
+    window.store.zoom(-0.25, true)
+  }
+
+  zoominTerminalShortcut = (event) => {
+    if (window.store.inActiveTerminal) {
+      window.store.zoomTerminal(event.wheelDeltaY)
+    } else {
+      const plus = event.wheelDeltaY > 0 ? 0.2 : -0.2
+      window.store.zoom(plus, true)
+    }
+  }
+
+  zoomoutTerminalShortcut = (event) => {
+    this.zoominTerminalShortcut(event)
+  }
+
+  render () {
+    return null
+  }
+}
+
+export default shortcutExtend(ShortcutControl)

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

@@ -0,0 +1,194 @@
+import { PureComponent } from 'react'
+import {
+  Button,
+  Input,
+  message
+} from 'antd'
+import {
+  EditFilled,
+  CheckOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+import { debounce } from 'lodash-es'
+import { getKeyCharacter } from './get-key-char.js'
+
+export default class ShortcutEdit extends PureComponent {
+  state = {
+    editMode: false,
+    shortcut: '',
+    data: null
+  }
+
+  addEventListener = () => {
+    const elem = document.querySelector('.ant-drawer')
+    elem?.addEventListener('click', this.handleClickOuter)
+    document.addEventListener('keydown', this.handleKeyDown)
+    document.addEventListener('mousewheel', this.handleKeyDown)
+  }
+
+  removeEventListener = () => {
+    const elem = document.querySelector('.ant-drawer')
+    elem?.removeEventListener('click', this.handleClickOuter)
+    document.removeEventListener('keydown', this.handleKeyDown)
+    document.removeEventListener('mousewheel', this.handleKeyDown)
+  }
+
+  isInsideElement = (event) => {
+    const { target } = event
+    const cls = this.getCls()
+    if (!target || !target.classList) {
+      return false
+    } else if (target.classList.contains(cls)) {
+      return true
+    } else {
+      const parent = target.parentElement
+      if (parent !== null) {
+        return this.isInsideElement({ target: parent })
+      } else {
+        return false
+      }
+    }
+  }
+
+  handleClickOuter = (e) => {
+    if (!this.isInsideElement(e)) {
+      this.handleCancel()
+    }
+  }
+
+  handleEditClick = () => {
+    this.setState({
+      editMode: true
+    }, this.addEventListener)
+  }
+
+  handleCancel = () => {
+    this.setState({
+      editMode: false
+    }, this.removeEventListener)
+  }
+
+  handleConfirm = () => {
+    const {
+      name
+    } = this.props.data
+    this.props.updateConfig(
+      name, this.state.shortcut
+    )
+    this.handleCancel()
+  }
+
+  getCls = () => {
+    const { index } = this.props.data
+    return 'shortcut-control-' + index
+  }
+
+  warnCtrolKey = debounce(() => {
+    message.info(
+      'Must have one of Ctrl or Shift or Alt or Meta key',
+      undefined
+    )
+  }, 3000)
+
+  warnExist = debounce(() => {
+    message.info(
+      'Shortcut already exists',
+      undefined
+    )
+  }, 3000)
+
+  handleKeyDown = (e) => {
+    const {
+      code,
+      ctrlKey,
+      shiftKey,
+      metaKey,
+      altKey,
+      wheelDeltaY
+    } = e
+    const codeName = e instanceof window.WheelEvent
+      ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
+      : code
+    const codeK = getKeyCharacter(codeName)
+    const noControlKey = !ctrlKey && !shiftKey && !metaKey && !altKey
+    if (noControlKey && codeK === 'Escape') {
+      return this.handleCancel()
+    } else if (noControlKey) {
+      return this.warnCtrolKey()
+    }
+    const r = (ctrlKey ? 'ctrl+' : '') +
+      (metaKey ? 'meta+' : '') +
+      (shiftKey ? 'shift+' : '') +
+      (altKey ? 'alt+' : '') +
+      codeK.toLowerCase()
+    if (this.props.keysTaken[r]) {
+      return this.warnExist()
+    }
+    this.setState({
+      shortcut: r
+    })
+  }
+
+  handleClickOutside = () => {
+    this.removeEventListener()
+    this.setState({
+      editMode: false
+    })
+  }
+
+  renderStatic () {
+    const {
+      shortcut
+    } = this.props.data
+    return (
+      <Button
+        className='edit-shortcut-button'
+        onClick={this.handleEditClick}
+      >
+        <span>{shortcut}</span>
+        <EditFilled
+          className='shortcut-edit-icon pointer mg1l'
+        />
+      </Button>
+    )
+  }
+
+  renderAfter () {
+    const {
+      shortcut
+    } = this.state
+    if (!shortcut) {
+      return null
+    }
+    return (
+      <div>
+        <CheckOutlined
+          onClick={this.handleConfirm}
+          className='pointer'
+        />
+        <CloseOutlined
+          onClick={this.handleCancel}
+          className='pointer mg1l'
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      shortcut,
+      editMode
+    } = this.state
+    if (!editMode) {
+      return this.renderStatic()
+    }
+    return (
+      <div className={this.getCls()}>
+        <Input
+          addonAfter={this.renderAfter()}
+          value={shortcut}
+        />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,76 @@
+import { getKeyCharacter } from './get-key-char.js'
+import shortcutsDefaultsGen from './shortcuts-defaults.js'
+import {
+  isMacJs
+} from '../../common/constants'
+
+function buildConfig (config) {
+  const defs = shortcutsDefaultsGen()
+  const { shortcuts = {} } = config
+  return defs.reduce((p, c) => {
+    const propName = isMacJs ? 'shortcutMac' : 'shortcut'
+    const name = c.name + '_' + propName
+    const [type, func] = c.name.split('_')
+    return {
+      ...p,
+      [name]: {
+        shortcut: c.readonly ? c[propName] : (shortcuts[name] || c[propName]),
+        type,
+        func
+      }
+    }
+  }, {})
+}
+
+export function shortcutExtend (Cls) {
+  Cls.prototype.handleKeyboardEvent = function (event) {
+    // console.log('event', event)
+    const {
+      code,
+      ctrlKey,
+      shiftKey,
+      metaKey,
+      altKey,
+      wheelDeltaY
+    } = event
+    const codeName = event instanceof window.WheelEvent
+      ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
+      : code
+    const codeK = getKeyCharacter(codeName)
+    const noControlKey = !ctrlKey && !shiftKey && !metaKey && !altKey
+    if (noControlKey) {
+      return
+    }
+    const r = (ctrlKey ? 'ctrl+' : '') +
+      (metaKey ? 'meta+' : '') +
+      (shiftKey ? 'shift+' : '') +
+      (altKey ? 'alt+' : '') +
+      codeK.toLowerCase()
+    const shortcutsConfig = buildConfig(this.props.config)
+    const keys = Object.keys(shortcutsConfig)
+    const len = keys.length
+    for (let i = 0; i < len; i++) {
+      const k = keys[i]
+      const conf = shortcutsConfig[k]
+      const funcName = conf.func + 'Shortcut'
+      if (conf.shortcut.split(',').includes(r)) {
+        if (this[funcName]) {
+          this[funcName](event)
+        } else {
+          return false
+        }
+      }
+    }
+  }
+  return Cls
+}
+
+export function shortcutDescExtend (Cls) {
+  Cls.prototype.getShortcut = function (name) {
+    const shortcutsConfig = buildConfig(this.props.config)
+    const propName = isMacJs ? 'shortcutMac' : 'shortcut'
+    const n = `${name}_${propName}`
+    return shortcutsConfig[n].shortcut
+  }
+  return Cls
+}