@electerm/electerm-react 2.3.176 → 2.3.190

package/client/components/bookmark-form/tree-delete.jsx

@@ -1,4 +1,3 @@
-import StartSessionSelect from '../setting-panel/start-session-select'
 import {
   Tree,
   Button,
@@ -6,67 +5,126 @@ import {
 } from 'antd'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
+import { createTitleWithTag } from '../../common/create-title'
 
 const e = window.translate
 
-export default class BookmarkTreeDelete extends StartSessionSelect {
-  onExpand = (expandedKeys) => {
+function buildData (bookmarks, bookmarkGroups) {
+  const cats = bookmarkGroups
+  const tree = bookmarks
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+  const btree = cats
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+  function buildSubCats (id) {
+    const x = btree[id]
+    if (!x) {
+      return ''
+    }
+    const y = {
+      key: x.id,
+      value: x.id,
+      title: x.title
+    }
+    y.children = [
+      ...(x.bookmarkGroupIds || []).map(buildSubCats),
+      ...(x.bookmarkIds || []).map(buildLeaf)
+    ].filter(d => d)
+    if (y.children && !y.children.length) {
+      delete y.children
+    }
+    return y
+  }
+  function buildLeaf (id) {
+    const x = tree[id]
+    if (!x) {
+      return ''
+    }
+    return {
+      value: x.id,
+      key: x.id,
+      title: createTitleWithTag(x)
+    }
+  }
+  const level1 = cats.filter(d => d.level !== 2)
+    .map(d => {
+      const r = {
+        title: d.title,
+        value: d.id,
+        key: d.id,
+        children: [
+          ...(d.bookmarkGroupIds || []).map(buildSubCats),
+          ...(d.bookmarkIds || []).map(buildLeaf)
+        ].filter(d => d)
+      }
+      return r
+    }).filter(d => d)
+  return level1
+}
+
+export default function BookmarkTreeDelete (props) {
+  const { expandedKeys, checkedKeys, bookmarks, bookmarkGroups } = props
+
+  const onExpand = (expandedKeys) => {
     window.store.expandedKeys = deepCopy(expandedKeys)
   }
 
-  onCheck = (checkedKeys) => {
+  const onCheck = (checkedKeys) => {
     window.store.checkedKeys = deepCopy(checkedKeys)
   }
 
-  handleDel = () => {
+  const handleDel = () => {
     const { store } = window
-    const {
-      checkedKeys
-    } = this.props
     const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
     store.delItems(arr, settingMap.bookmarks)
     store.delItems(arr, settingMap.bookmarkGroups)
     store.checkedKeys = []
   }
 
-  handleCancel = () => {
+  const handleCancel = () => {
     const { store } = window
     store.bookmarkSelectMode = false
     store.checkedKeys = []
   }
 
-  render () {
-    const { expandedKeys, checkedKeys } = this.props
-    const rProps = {
-      checkable: true,
-      autoExpandParent: true,
-      onCheck: this.onCheck,
-      expandedKeys,
-      checkedKeys,
-      onExpand: this.onExpand,
-      treeData: this.buildData()
-    }
-    const len = checkedKeys.length
-    return (
-      <div>
-        <div className='pd2'>
-          <Space.Compact>
-            <Button
-              type='primary'
-              disabled={!len}
-              onClick={this.handleDel}
-            >
-              {e('delSelected')} ({len})
-            </Button>
-            <Button
-              onClick={this.handleCancel}
-            >
-              {e('cancel')}
-            </Button>
-          </Space.Compact>
-          <Tree {...rProps} />
-        </div>
-      </div>
-    )
+  const rProps = {
+    checkable: true,
+    autoExpandParent: true,
+    onCheck,
+    expandedKeys,
+    checkedKeys,
+    onExpand,
+    treeData: buildData(bookmarks, bookmarkGroups)
   }
+  const len = checkedKeys.length
+  return (
+    <div>
+      <div className='pd2'>
+        <Space.Compact>
+          <Button
+            type='primary'
+            disabled={!len}
+            onClick={handleDel}
+          >
+            {e('delSelected')} ({len})
+          </Button>
+          <Button
+            onClick={handleCancel}
+          >
+            {e('cancel')}
+          </Button>
+        </Space.Compact>
+        <Tree {...rProps} />
+      </div>
+    </div>
+  )
 }

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -11,18 +11,14 @@ import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
 import ShortcutEdit from '../shortcuts/shortcut-editor'
-import shortcutsDefaultsGen from '../shortcuts/shortcuts-defaults'
+import { getKeysTakenData } from '../shortcuts/shortcut-utils'
 import deepCopy from 'json-deep-copy'
-import {
-  isMacJs as isMac
-} from '../../common/constants.js'
 import templates from './templates'
 import HelpIcon from '../common/help-icon'
 
 const FormItem = Form.Item
 const { Option } = Select
 const e = window.translate
-const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default function QuickCommandForm (props) {
   const [form] = Form.useForm()
@@ -42,41 +38,15 @@ export default function QuickCommandForm (props) {
     })
     setShortcut('')
   }
-  const getKeysTakenData = () => {
-    const { shortcuts = {} } = store.config
-    const { quickCommands = [] } = store
-
-    // Gather system shortcuts
-    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
-      const propName = isMac ? 'shortcutMac' : 'shortcut'
-      const name = k.name + '_' + propName
-      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-      const v = vv
-        .split(',')
-        .map(f => f.trim())
-        .reduce((p, k) => ({
-          ...p,
-          [k]: true
-        }), {})
-      return {
-        ...p,
-        ...v
-      }
-    }, {})
+  const getKeysTaken = () => {
+    const keysTaken = getKeysTakenData()
 
-    // Gather quick command shortcuts
-    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
-      if (command.shortcut) {
-        acc[command.shortcut] = true
-      }
-      return acc
-    }, {})
-
-    // Combine system shortcuts and quick command shortcuts
-    return {
-      ...systemShortcuts,
-      ...quickCommandShortcuts
+    // Exclude current shortcut if editing existing command
+    if (formData.shortcut) {
+      delete keysTaken[formData.shortcut]
     }
+
+    return keysTaken
   }
 
   async function handleSubmit (res) {
@@ -126,7 +96,7 @@ export default function QuickCommandForm (props) {
       name: uid,
       shortcut
     },
-    keysTaken: getKeysTakenData(),
+    keysTaken: getKeysTaken(),
     store,
     updateConfig,
     handleClear,

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

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import ShortcutEdit from '../shortcuts/shortcut-editor'
+import { getKeysTakenData } from '../shortcuts/shortcut-utils'
+import './setting.styl'
+
+const e = window.translate
+
+// Bidirectional maps for key conversions
+const MODIFIER_MAP = {
+  // Display format -> Electron format
+  ctrl: 'CommandOrControl',
+  meta: 'CommandOrControl',
+  alt: 'Alt',
+  shift: 'Shift',
+  // Electron format -> Display format
+  CommandOrControl: 'ctrl',
+  Command: 'meta',
+  Control: 'ctrl',
+  Alt: 'alt',
+  Shift: 'shift',
+  Super: 'meta',
+  Meta: 'meta'
+}
+
+const KEY_MAP = {
+  // Display format -> Electron format
+  '←': 'Left',
+  '↑': 'Up',
+  '→': 'Right',
+  '↓': 'Down',
+  '▲': 'mouseWheelUp',
+  '▼': 'mouseWheelDown',
+  enter: 'Return',
+  // Electron format -> Display format
+  Left: '←',
+  Up: '↑',
+  Right: '→',
+  Down: '↓',
+  Return: 'enter',
+  Enter: 'enter',
+  mouseWheelUp: '▲',
+  mouseWheelDown: '▼'
+}
+
+export default class HotkeySetting extends Component {
+  onChangeHotkey = (name, shortcut) => {
+    // Convert shortcut from ShortcutEdit format to Electron accelerator format
+    const electronShortcut = this.convertToElectronAccelerator(shortcut)
+    return this.props.onSaveConfig({
+      [name]: electronShortcut
+    })
+  }
+
+  convertToElectronAccelerator = (shortcut) => {
+    if (!shortcut) return shortcut
+
+    // Split the shortcut into parts
+    const parts = shortcut.split('+')
+    const modifiers = []
+    let key = ''
+
+    // Process each part
+    for (const part of parts) {
+      const lowerPart = part.toLowerCase()
+      if (MODIFIER_MAP[lowerPart]) {
+        modifiers.push(MODIFIER_MAP[lowerPart])
+      } else {
+        // Handle special key mappings
+        key = KEY_MAP[part] || part.toUpperCase()
+      }
+    }
+
+    // Combine modifiers and key
+    return [...modifiers, key].join('+')
+  }
+
+  convertFromElectronAccelerator = (electronShortcut) => {
+    if (!electronShortcut) return electronShortcut
+
+    // Split the shortcut into parts
+    const parts = electronShortcut.split('+')
+    const modifiers = []
+    let key = ''
+
+    // Process each part
+    for (const part of parts) {
+      if (MODIFIER_MAP[part]) {
+        modifiers.push(MODIFIER_MAP[part])
+      } else {
+        // Handle special key mappings
+        key = KEY_MAP[part] || part.toLowerCase()
+      }
+    }
+
+    // Combine modifiers and key
+    return [...modifiers, key].join('+')
+  }
+
+  getKeysTaken = (currentHotkey) => {
+    const keysTaken = getKeysTakenData()
+
+    // Convert current hotkey to display format for comparison
+    const currentShortcutDisplay = this.convertFromElectronAccelerator(currentHotkey)
+
+    // Remove current hotkey from taken keys (allow re-setting the same hotkey)
+    delete keysTaken[currentShortcutDisplay]
+
+    return keysTaken
+  }
+
+  render () {
+    const { hotkey } = this.props
+    const shortcutProps = {
+      data: {
+        name: 'hotkey',
+        shortcut: this.convertFromElectronAccelerator(hotkey),
+        index: 0
+      },
+      updateConfig: this.onChangeHotkey,
+      keysTaken: this.getKeysTaken(hotkey)
+    }
+
+    return (
+      <div className='pd2b'>
+        <div className='pd1b'>{e('hotkeyDesc')}</div>
+        <ShortcutEdit
+          {...shortcutProps}
+        />
+      </div>
+    )
+  }
+}

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

@@ -32,24 +32,12 @@ import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
 import isColorDark from '../../common/is-color-dark'
 import DeepLinkControl from './deep-link-control'
+import HotkeySetting from './hotkey'
 import './setting.styl'
 
 const { Option } = Select
 const e = window.translate
 
-const modifiers = [
-  'Command',
-  'Control',
-  'Alt',
-  'Shift'
-]
-const keys = [
-  ...'0123456789~ABCDEFGHIJKLMNOPQRTSUVWXYZ'.split(''),
-  ...new Array(12).fill(0).map((m, i) => {
-    return 'F' + (i + 1)
-  })
-]
-
 export default class SettingCommon extends Component {
   state = {
     ready: false,
@@ -142,28 +130,12 @@ export default class SettingCommon extends Component {
     )
   }
 
-  handleChangeModifier = modifier => {
-    const { hotkey } = this.props.config
-    const key = hotkey.split('+')[1]
-    return this.saveConfig({
-      hotkey: `${modifier}+${key}`
-    })
-  }
-
   onChangeTimeout = sshReadyTimeout => {
     return this.saveConfig({
       sshReadyTimeout
     })
   }
 
-  handleChangeKey = key => {
-    const { hotkey } = this.props.config
-    const modifier = hotkey.split('+')[0]
-    return this.saveConfig({
-      hotkey: `${modifier}+${key}`
-    })
-  }
-
   handleChangeLang = language => {
     this.setState({
       languageChanged: true
@@ -211,12 +183,6 @@ export default class SettingCommon extends Component {
     this.props.store.setConfig(ext)
   }
 
-  renderOption = (m, i) => {
-    return (
-      <Option value={m} key={m + 'opt' + i}>{m}</Option>
-    )
-  }
-
   renderToggle = (name, extra = null) => {
     const checked = !!this.props.config[name]
     return (
@@ -513,7 +479,6 @@ export default class SettingCommon extends Component {
       langs = []
     } = window.et
     const terminalThemes = props.store.getSidebarList(settingMap.terminalThemes)
-    const [modifier, key] = hotkey.split('+')
     const pops = {
       onStartSessions: props.config.onStartSessions,
       bookmarks: props.bookmarks,
@@ -521,35 +486,16 @@ export default class SettingCommon extends Component {
       workspaces: props.store.workspaces,
       onChangeStartSessions: this.onChangeStartSessions
     }
+    const hotkeyProps = {
+      hotkey,
+      onSaveConfig: this.saveConfig
+    }
     return (
       <div className='form-wrap pd1y pd2x'>
         <h2>{e('settings')}</h2>
-        <div className='pd1b'>{e('hotkeyDesc')}</div>
-        <div className='pd2b'>
-          <Select
-            value={modifier}
-            onChange={this.handleChangeModifier}
-            className='width100'
-            popupMatchSelectWidth={false}
-            showSearch
-          >
-            {
-              modifiers.map(this.renderOption)
-            }
-          </Select>
-          <span className='mg1x'>+</span>
-          <Select
-            value={key}
-            className='width100'
-            onChange={this.handleChangeKey}
-            popupMatchSelectWidth={false}
-            showSearch
-          >
-            {
-              keys.map(this.renderOption)
-            }
-          </Select>
-        </div>
+        <HotkeySetting
+          {...hotkeyProps}
+        />
         <div className='pd1b'>{e('onStartBookmarks')}</div>
         <div className='pd2b'>
           <StartSession

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

@@ -37,7 +37,7 @@ export function getKeyCharacter (code = '') {
   }
   if (code.startsWith('Key') && code.length === 4) {
     return code[3].toLowerCase()
-  } else if (code.startsWith('Digit') && code.length === 5) {
+  } else if (code.startsWith('Digit') && code.length === 6) {
     return code[5]
   } else {
     return mapping[code] || code

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

@@ -139,6 +139,11 @@ class ShortcutControl extends React.PureComponent {
     window.store.reloadTab()
   }, 500)
 
+  reloadAllShortcut = throttle((e) => {
+    e.stopPropagation()
+    window.store.reloadAllTabs()
+  }, 500)
+
   cloneToNextLayoutShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.cloneToNextLayout()

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

@@ -106,6 +106,8 @@ export default class ShortcutEdit extends PureComponent {
       altKey,
       wheelDeltaY
     } = e
+    e.preventDefault()
+    e.stopPropagation()
     const codeName = e instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
       : code
@@ -201,6 +203,7 @@ export default class ShortcutEdit extends PureComponent {
         <Input
           addonAfter={this.renderAfter()}
           value={shortcut}
+          className='shortcut-input'
         />
       </div>
     )

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

@@ -44,6 +44,11 @@ function buildConfigForSearch (config) {
   }, {})
 }
 
+function isInAntdInput () {
+  const activeElement = document.activeElement
+  return activeElement && activeElement.classList.contains('shortcut-input')
+}
+
 export function shortcutExtend (Cls) {
   Cls.prototype.handleKeyboardEvent = function (event) {
     const {
@@ -57,6 +62,9 @@ export function shortcutExtend (Cls) {
       type,
       key
     } = event
+    if (isInAntdInput()) {
+      return
+    }
     if (this.cmdAddon) {
       this.cmdAddon.handleKey(event)
     }

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

@@ -0,0 +1,49 @@
+import { isMacJs as isMac } from '../../common/constants.js'
+import shortcutsDefaultsGen from './shortcuts-defaults'
+
+/**
+ * Get keys taken data for shortcut conflict checking
+ * @returns {object} Object with shortcut strings as keys and true as values
+ */
+export function getKeysTakenData () {
+  const { store } = window
+  const { config, quickCommands } = store
+  const { shortcuts = {} } = config
+
+  // Get shortcuts defaults
+  const shortcutsDefaults = shortcutsDefaultsGen()
+
+  // Gather system shortcuts
+  const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+    const propName = isMac ? 'shortcutMac' : 'shortcut'
+    const name = k.name + '_' + propName
+    const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+    if (!vv) return p
+
+    const v = vv
+      .split(',')
+      .map(f => f.trim())
+      .reduce((p, k) => ({
+        ...p,
+        [k]: true
+      }), {})
+    return {
+      ...p,
+      ...v
+    }
+  }, {})
+
+  // Gather quick command shortcuts
+  const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+    if (command.shortcut) {
+      acc[command.shortcut] = true
+    }
+    return acc
+  }, {})
+
+  // Combine system shortcuts and quick command shortcuts
+  return {
+    ...systemShortcuts,
+    ...quickCommandShortcuts
+  }
+}

package/client/components/shortcuts/shortcuts-defaults.js

@@ -16,6 +16,11 @@ export default () => {
       shortcut: 'alt+r',
       shortcutMac: 'alt+r'
     },
+    {
+      name: 'app_reloadAll',
+      shortcut: 'alt+y',
+      shortcutMac: 'alt+y'
+    },
     {
       name: 'app_cloneToNextLayout',
       shortcut: 'ctrl+/',

package/client/components/shortcuts/shortcuts.jsx

@@ -6,9 +6,10 @@ import {
   Table,
   Button
 } from 'antd'
+import { isMacJs as isMac } from '../../common/constants.js'
 import {
-  isMacJs as isMac
-} from '../../common/constants.js'
+  getKeysTakenData
+} from './shortcut-utils.js'
 
 const e = window.translate
 const shortcutsDefaults = shortcutsDefaultsGen()
@@ -45,43 +46,6 @@ export default class Shortcuts extends PureComponent {
       })
   }
 
-  getKeysTakenData = () => {
-    const { config, quickCommands = [] } = this.props
-    const { shortcuts = {} } = config
-
-    // Gather system shortcuts
-    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
-      const propName = isMac ? 'shortcutMac' : 'shortcut'
-      const name = k.name + '_' + propName
-      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-      const v = vv
-        .split(',')
-        .map(f => f.trim())
-        .reduce((p, k) => ({
-          ...p,
-          [k]: true
-        }), {})
-      return {
-        ...p,
-        ...v
-      }
-    }, {})
-
-    // Gather quick command shortcuts
-    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
-      if (command.shortcut) {
-        acc[command.shortcut] = true
-      }
-      return acc
-    }, {})
-
-    // Combine system shortcuts and quick command shortcuts
-    return {
-      ...systemShortcuts,
-      ...quickCommandShortcuts
-    }
-  }
-
   render () {
     const columns = [
       {
@@ -124,7 +88,7 @@ export default class Shortcuts extends PureComponent {
           return (
             <ShortcutEdit
               data={inst}
-              keysTaken={this.getKeysTakenData()}
+              keysTaken={getKeysTakenData()}
               updateConfig={this.updateConfig}
             />
           )

package/client/components/sidebar/index.jsx

@@ -61,6 +61,9 @@ export default function Sidebar (props) {
   }
 
   const handleClickBookmark = () => {
+    if (showModal) {
+      store.showModal = 0
+    }
     if (pinned) {
       return
     }