@electerm/electerm-react 1.35.0 → 1.36.1

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

@@ -0,0 +1,494 @@
+import React, { Component } from 'react'
+import {
+  CodeOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import {
+  message,
+  Select,
+  Switch,
+  Input,
+  Upload,
+  InputNumber,
+  Button,
+  AutoComplete,
+  Tooltip
+} from 'antd'
+import deepCopy from 'json-deep-copy'
+import {
+  noTerminalBgValue,
+  rendererTypes
+} from '../../common/constants'
+import defaultSettings from '../../common/default-setting'
+import ShowItem from '../common/show-item'
+import { osResolve } from '../../common/resolve'
+import { isNumber, isNaN } from 'lodash-es'
+import mapper from '../../common/auto-complete-data-mapper'
+import KeywordForm from './keywords-form'
+import HelpIcon from '../common/help-icon'
+import './setting.styl'
+
+const { Option } = Select
+const { prefix } = window
+const e = prefix('setting')
+const s = prefix('ssh')
+const p = prefix('sftp')
+const t = prefix('terminalThemes')
+const f = prefix('form')
+
+export default class SettingTerminal extends Component {
+  state = {
+    ready: false
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  handleResetAll = () => {
+    this.saveConfig(
+      deepCopy(defaultSettings)
+    )
+  }
+
+  onChangeValue = (value, name) => {
+    if (name === 'useSystemTitleBar') {
+      message.info(e('useSystemTitleBarTip'), 5)
+    }
+    this.saveConfig({
+      [name]: value
+    })
+  }
+
+  handleChangeFont = (values) => {
+    this.onChangeValue(
+      values.join(', '),
+      'fontFamily'
+    )
+  }
+
+  handleChangeCursorStyle = (cursorStyle) => {
+    this.onChangeValue(
+      cursorStyle,
+      'cursorStyle'
+    )
+  }
+
+  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'))
+        delete ext.hotkey
+      } else {
+        message.success(e('saved'))
+      }
+    }
+    this.props.store.setConfig(ext)
+  }
+
+  handleSubmitKeywords = (data) => {
+    return this.saveConfig(data)
+  }
+
+  renderToggle = (name, extra = null) => {
+    const checked = !!this.props.config[name]
+    return (
+      <div className='pd2b' key={'rt' + name}>
+        <Switch
+          checked={checked}
+          checkedChildren={e(name)}
+          unCheckedChildren={e(name)}
+          onChange={v => this.onChangeValue(v, name)}
+        />
+        {isNumber(extra) ? null : extra}
+      </div>
+    )
+  }
+
+  renderNumber = (name, options, title = '', width = 136) => {
+    let value = this.props.config[name]
+    if (options.valueParser) {
+      value = options.valueParser(value)
+    }
+    const defaultValue = defaultSettings[name]
+    const {
+      step = 1,
+      min,
+      max,
+      cls,
+      onChange = (v) => {
+        this.onChangeValue(v, name)
+      }
+    } = options
+    const opts = {
+      step,
+      value,
+      min,
+      max,
+      onChange,
+      placeholder: defaultValue
+    }
+    if (title) {
+      opts.formatter = v => `${title}${options.extraDesc || ''}: ${v}`
+      opts.parser = (v) => {
+        let vv = isNumber(v)
+          ? v
+          : Number(v.split(': ')[1], 10)
+        if (isNaN(vv)) {
+          vv = defaultValue
+        }
+        return vv
+      }
+      opts.style = {
+        width: width + 'px'
+      }
+    }
+    return (
+      <div className={`pd2b ${cls || ''}`}>
+        <InputNumber
+          {...opts}
+        />
+      </div>
+    )
+  }
+
+  renderText = (name, placeholder) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    return (
+      <div className='pd2b'>
+        <Input
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder || defaultValue}
+        />
+      </div>
+    )
+  }
+
+  renderBgOption = item => {
+    return {
+      value: item.value,
+      label: item.desc
+    }
+  }
+
+  renderTerminalBgSelect = (name) => {
+    const value = this.props.config[name]
+    const defaultValue = defaultSettings[name]
+    const onChange = (v) => this.onChangeValue(v, name)
+    const after = (
+      <Upload
+        beforeUpload={(file) => {
+          this.onChangeValue(file.path, name)
+          return false
+        }}
+        showUploadList={false}
+      >
+        <span>{e('chooseFile')}</span>
+      </Upload>
+    )
+    const dataSource = [
+      {
+        value: '',
+        desc: t('default')
+      },
+      {
+        value: noTerminalBgValue,
+        desc: e('noTerminalBg')
+      }
+    ]
+    const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
+
+    const renderFilter = () => {
+      if (this.props.config[name] === noTerminalBgValue) return
+
+      return (
+        <div>
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterOpacity',
+              numberOpts,
+              e('Opacity')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBlur',
+              { ...numberOpts, min: 0, max: 50, step: 0.5 },
+              e('Blur')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterBrightness',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Brightness')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterGrayscale',
+              numberOpts,
+              e('Grayscale')
+            )
+          }
+          {
+            this.renderNumber(
+              'terminalBackgroundFilterContrast',
+              { ...numberOpts, min: 0, max: 10, step: 0.1 },
+              e('Contrast')
+            )
+          }
+        </div>
+      )
+    }
+
+    return (
+      <div className='pd2b'>
+        <div className='pd1b'>
+          <Tooltip
+            title='eg: https://xx.com/xx.png or /path/to/xx.png'
+          >
+            <AutoComplete
+              value={value}
+              onChange={onChange}
+              placeholder={defaultValue}
+              className='width-100'
+              options={dataSource.map(this.renderBgOption)}
+            >
+              <Input
+                addonAfter={after}
+              />
+            </AutoComplete>
+          </Tooltip>
+        </div>
+
+        {
+          renderFilter()
+        }
+      </div>
+    )
+  }
+
+  renderReset = () => {
+    return (
+      <div className='pd1b pd1t'>
+        <Button
+          onClick={this.handleResetAll}
+        >
+          {e('resetAllToDefault')}
+        </Button>
+      </div>
+    )
+  }
+
+  renderDefaultTerminalType = () => {
+    const opts = this.props.config.terminalTypes.map(mapper)
+    return (
+      <AutoComplete
+        options={opts}
+        style={{
+          width: '200px'
+        }}
+        value={this.props.config.terminalType}
+        onChange={(v) => this.onChangeValue(v, 'terminalType')}
+      />
+    )
+  }
+
+  renderCursorStyleSelect = () => {
+    const {
+      cursorStyle = 'block'
+    } = this.props.config
+    const sets = [
+      {
+        id: 'block',
+        title: '▊'
+      },
+      {
+        id: 'underline',
+        title: '_'
+      },
+      {
+        id: 'bar',
+        title: '|'
+      }
+    ]
+    const props = {
+      onChange: this.handleChangeCursorStyle,
+      value: cursorStyle,
+      style: {
+        width: '100px'
+      }
+    }
+    return (
+      <div className='pd1b'>
+        <span className='inline-title mg1r'>{e('cursorStyle')}</span>
+        <Select
+          {...props}
+          showSearch
+        >
+          {
+            sets.map(f => {
+              return (
+                <Option value={f.id} key={f.id}>
+                  <b>{f.title}</b>
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    )
+  }
+
+  renderFontFamily = () => {
+    const { fonts } = this.props.store
+    const { fontFamily } = this.props.config
+    const props = {
+      mode: 'multiple',
+      onChange: this.handleChangeFont,
+      value: fontFamily.split(/, */g)
+    }
+    return (
+      <Select
+        {...props}
+        showSearch
+      >
+        {
+          fonts.map(f => {
+            return (
+              <Option value={f} key={f}>
+                <span style={{
+                  fontFamily: f
+                }}
+                >{f}
+                </span>
+              </Option>
+            )
+          })
+        }
+      </Select>
+    )
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    const {
+      rendererType,
+      keywords = [{ color: 'red' }]
+    } = this.props.config
+    const {
+      appPath
+    } = this.props.store
+    const ps = {
+      formData: {
+        keywords
+      },
+      submit: this.handleSubmitKeywords
+    }
+    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
+    return (
+      <div className='form-wrap pd1y pd2x'>
+        <div className='pd1y font16 bold'>
+          <CodeOutlined className='mg1r' />
+          {s('terminal')} {e('settings')}
+        </div>
+        {
+          this.renderNumber('scrollback', {
+            step: 200,
+            min: 1000
+          }, e('scrollBackDesc'), 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('rendererType')}</span>
+          <Select
+            onChange={v => this.onChangeValue(v, 'rendererType')}
+            value={rendererType}
+            popupMatchSelectWidth={false}
+          >
+            {
+              Object.keys(rendererTypes).map(id => {
+                return (
+                  <Option key={id} value={id}>{id}</Option>
+                )
+              })
+            }
+          </Select>
+        </div>
+        {
+          this.renderNumber('fontSize', {
+            step: 1,
+            min: 9
+          }, `${t('default')} ${e('fontSize')}`, 400)
+        }
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{t('default')} {e('fontFamily')}</span>
+          {
+            this.renderFontFamily()
+          }
+        </div>
+        <div className='pd2b'>
+          <div className='pd1b'>
+            <span className='inline-title mg1r'>{f('keywordsHighlight')}</span>
+            <HelpIcon
+              title={f('supportRegexp')}
+            />
+          </div>
+          <KeywordForm
+            {...ps}
+          />
+        </div>
+        <div className='pd2b'>
+          <span className='inline-title mg1r'>{e('defaultTerminalType')}</span>
+          {
+            this.renderDefaultTerminalType()
+          }
+        </div>
+        <div className='pd1b'>{e('terminalBackgroundImage')}</div>
+        {
+          this.renderTerminalBgSelect('terminalBackgroundImagePath')
+        }
+        <div className='pd1b'>{e('terminalWordSeparator')}</div>
+        {
+          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
+        }
+        {
+          this.renderCursorStyleSelect()
+        }
+        {
+          [
+            'cursorBlink',
+            'rightClickSelectsWord',
+            'pasteWhenContextMenu',
+            'copyWhenSelect',
+            'ctrlOrMetaOpenTerminalLink'
+          ].map(this.renderToggle)
+        }
+        {this.renderToggle('saveTerminalLogToFile', (
+          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
+        ))}
+        {this.renderReset()}
+      </div>
+    )
+  }
+}

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

@@ -1,4 +1,5 @@
-import Setting from './setting'
+import SettingCommon from './setting-common'
+import SettingTerminal from './setting-terminal'
 import SettingCol from './col'
 import SyncSetting from '../setting-sync/setting-sync'
 import Shortcuts from '../shortcuts/shortcuts'
@@ -6,6 +7,7 @@ import List from './list'
 import {
   settingMap,
   settingSyncId,
+  settingTerminalId,
   settingShortcutsId
 } from '../../common/constants'
 
@@ -25,10 +27,12 @@ export default function TabSettings (props) {
   const sid = settingItem.id
   if (sid === settingSyncId) {
     elem = <SyncSetting store={store} />
+  } else if (sid === settingTerminalId) {
+    elem = <SettingTerminal {...listProps} config={store.config} />
   } else if (sid === settingShortcutsId) {
     elem = <Shortcuts store={store} />
   } else {
-    elem = <Setting {...listProps} config={store.config} />
+    elem = <SettingCommon {...listProps} config={store.config} />
   }
   return (
     <div

package/client/components/sftp/list-table-ui.jsx

@@ -94,7 +94,7 @@ export default class FileListTable extends React.Component {
         style: {
           width: w + 'px',
           left: (w * i) + 'px',
-          zIndex: 3 + i
+          zIndex: 3 + i * 2
         }
       }
     })
@@ -110,7 +110,8 @@ export default class FileListTable extends React.Component {
           nextProp: properties[i + 1].name,
           style: {
             left: (w * (i + 1) - (splitDraggerWidth / 2)) + 'px',
-            width: splitDraggerWidth + 'px'
+            width: splitDraggerWidth + 'px',
+            zIndex: 4 + i * 2
           }
         }
       ]

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 () {
@@ -27,10 +28,18 @@ class ShortcutControl extends React.PureComponent {
     window.store.onNewSsh()
   }
 
-  togglefullscreenShortcut = (e) => {
+  togglefullscreenShortcut = throttle((e) => {
     e.stopPropagation()
-    document.querySelector('.term-fullscreen-control').click()
-  }
+    const x = document.querySelector('.term-fullscreen-control') ||
+    document.querySelector('.term-fullscreen-control1')
+    x && x.click()
+  }, 300)
+
+  splitShortcut = throttle((e) => {
+    e.stopPropagation()
+    const x = document.querySelector('.icon-split')
+    x && x.click()
+  }, 300)
 
   zoominShortcut = (e) => {
     e.stopPropagation()

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

@@ -9,7 +9,7 @@ import {
   CheckOutlined,
   CloseOutlined
 } from '@ant-design/icons'
-import { debounce } from 'lodash-es'
+import { throttle } from 'lodash-es'
 import { getKeyCharacter } from './get-key-char.js'
 
 export default class ShortcutEdit extends PureComponent {
@@ -83,14 +83,14 @@ export default class ShortcutEdit extends PureComponent {
     return 'shortcut-control-' + index
   }
 
-  warnCtrolKey = debounce(() => {
+  warnCtrolKey = throttle(() => {
     message.info(
       'Must have one of Ctrl or Shift or Alt or Meta key',
       undefined
     )
   }, 3000)
 
-  warnExist = debounce(() => {
+  warnExist = throttle(() => {
     message.info(
       'Shortcut already exists',
       undefined

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

@@ -24,7 +24,6 @@ function buildConfig (config) {
 
 export function shortcutExtend (Cls) {
   Cls.prototype.handleKeyboardEvent = function (event) {
-    // console.log('event', event)
     const {
       code,
       ctrlKey,

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

@@ -2,13 +2,13 @@ export default () => {
   return [
     {
       name: 'app_closeCurrentTab',
-      shortcut: 'ctrl+w',
-      shortcutMac: 'ctrl+w'
+      shortcut: 'alt+w',
+      shortcutMac: 'alt+w'
     },
     {
       name: 'app_newBookmark',
-      shortcut: 'ctrl+b',
-      shortcutMac: 'meta+b'
+      shortcut: 'ctrl+n',
+      shortcutMac: 'meta+n'
     },
     {
       name: 'app_togglefullscreen',
@@ -35,6 +35,11 @@ export default () => {
       shortcut: 'ctrl+tab',
       shortcutMac: 'ctrl+tab'
     },
+    {
+      name: 'terminal_split',
+      shortcut: 'ctrl+/',
+      shortcutMac: 'meta+/'
+    },
     {
       name: 'terminal_clear',
       shortcut: 'ctrl+l,ctrl+shift+l',

package/client/components/shortcuts/shortcuts.jsx

@@ -91,7 +91,7 @@ export default class Shortcuts extends Component {
           const pre = a === 'terminal' ? `[${ss('terminal')}] ` : ''
           if (
             [
-              'clear', 'selectAll', 'search'
+              'clear', 'selectAll', 'search', 'split'
             ].includes(b)
           ) {
             return pre + ss(b)

package/client/components/terminal/highlight-addon.js

@@ -0,0 +1,63 @@
+export class KeywordHighlighterAddon {
+  constructor (keywords) {
+    this.keywords = keywords
+  }
+
+  escape = str => {
+    return str.replace(/\\x1B/g, '\\x1B')
+      .replace(/\033/g, '\\033')
+  }
+
+  colorize = (color) => {
+    // Use a switch statement to map color names to ANSI codes
+    switch (color) {
+      case 'green':
+        return '\u001b[32m$&\u001b[0m'
+      case 'yellow':
+        return '\u001b[33m$&\u001b[0m'
+      case 'blue':
+        return '\u001b[34m$&\u001b[0m'
+      case 'magenta':
+        return '\u001b[35m$&\u001b[0m'
+      case 'cyan':
+        return '\u001b[36m$&\u001b[0m'
+      case 'white':
+        return '\u001b[37m$&\u001b[0m'
+      default:
+        return '\u001b[31m$&\u001b[0m'
+    }
+  }
+
+  highlightKeywords = (text) => {
+    console.log('this.keywords', this.keywords)
+    for (const obj of this.keywords) {
+      const {
+        keyword,
+        color = 'red'
+      } = obj || {}
+      if (keyword) {
+        const regex = new RegExp(`(${keyword})`, 'gi')
+        text = text.replace(regex, this.colorize(color))
+      }
+    }
+    return text
+  }
+
+  activate (terminal) {
+    this.terminal = terminal
+    // Override the write method to automatically highlight keywords
+    const originalWrite = terminal.write
+    terminal.write = (data) => {
+      originalWrite.call(
+        terminal,
+        terminal.displayRaw ? this.escape(data) : this.highlightKeywords(data)
+      )
+    }
+    this.originalWrite = originalWrite
+  }
+
+  dispose () {
+    // Restore the original write method when disposing the addon
+    this.terminal.write = this.originalWrite
+  }
+}