@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/tabs/tabs.styl

@@ -7,9 +7,12 @@
   ::-webkit-scrollbar
     width 0
     display none
-.not-system-ui.is-mac.not-webapp
+.not-system-ui.is-mac.not-webapp .layout-item.v1
   .tabs-inner
     margin-left 72px
+.not-system-ui.is-mac.not-webapp.pinned .layout-item.v1
+  .tabs-inner
+    margin-left 0
 .not-system-ui.not-mac.not-webapp
   .tabs-extra
     right 96px
@@ -22,7 +25,9 @@
   height 36px
   overflow-x scroll
   overflow-y hidden
+.layout-item.v1 .tabs-inner
   margin-left 42px
+
 .tabs-wrapper
   z-index 3
 .tab

package/client/components/tabs/window-control.jsx

@@ -3,59 +3,57 @@
  */
 
 import { CloseOutlined, MinusOutlined } from '@ant-design/icons'
-import { Component } from '../common/react-subx'
+import { auto } from 'manate/react'
 import {
   isMacJs
 } from '../../common/constants'
 
 const e = window.translate
 
-export default class WindowControl extends Component {
-  render () {
-    const {
-      isMaximized,
-      config
-    } = this.props.store
-    if (config.useSystemTitleBar || isMacJs) {
-      return null
-    }
-    const minimize = () => {
-      window.pre.runGlobalAsync('minimize')
-    }
-    const maximize = () => {
-      window.pre.runGlobalAsync('maximize')
-    }
-    const unmaximize = () => {
-      window.pre.runGlobalAsync('unmaximize')
-    }
-    const closeApp = () => {
-      window.store.exit()
-    }
-    return (
-      <div className='window-controls'>
-        <div className='window-control-box window-control-minimize' onClick={minimize}>
-          <MinusOutlined title={e('minimize')} className='iblock font12 widnow-control-icon' />
-        </div>
-        <div
-          className='window-control-box window-control-maximize'
-          onClick={
-            isMaximized ? unmaximize : maximize
+export default auto(function WindowControl (props) {
+  const {
+    isMaximized,
+    config
+  } = props.store
+  if (config.useSystemTitleBar || isMacJs) {
+    return null
+  }
+  const minimize = () => {
+    window.pre.runGlobalAsync('minimize')
+  }
+  const maximize = () => {
+    window.pre.runGlobalAsync('maximize')
+  }
+  const unmaximize = () => {
+    window.pre.runGlobalAsync('unmaximize')
+  }
+  const closeApp = () => {
+    window.store.exit()
+  }
+  return (
+    <div className='window-controls'>
+      <div className='window-control-box window-control-minimize' onClick={minimize}>
+        <MinusOutlined title={e('minimize')} className='iblock font12 widnow-control-icon' />
+      </div>
+      <div
+        className='window-control-box window-control-maximize'
+        onClick={
+          isMaximized ? unmaximize : maximize
+        }
+      >
+        <span
+          title={
+            isMaximized ? e('unmaximize') : e('maximize')
+          }
+          className={
+            'iblock font12 icon-maximize widnow-control-icon ' +
+              (isMaximized ? 'is-max' : 'not-max')
           }
-        >
-          <span
-            title={
-              isMaximized ? e('unmaximize') : e('maximize')
-            }
-            className={
-              'iblock font12 icon-maximize widnow-control-icon ' +
-                (isMaximized ? 'is-max' : 'not-max')
-            }
-          />
-        </div>
-        <div className='window-control-box window-control-close' onClick={closeApp}>
-          <CloseOutlined title={e('close')} className='iblock font12 widnow-control-icon' />
-        </div>
+        />
       </div>
-    )
-  }
-}
+      <div className='window-control-box window-control-close' onClick={closeApp}>
+        <CloseOutlined title={e('close')} className='iblock font12 widnow-control-icon' />
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/attach-addon-custom.js

@@ -1,7 +1,7 @@
 /**
  * customize AttachAddon
  */
-import { AttachAddon } from 'xterm-addon-attach'
+import { AttachAddon } from '@xterm/addon-attach'
 import regEscape from 'escape-string-regexp'
 
 export default class AttachAddonCustom extends AttachAddon {

package/client/components/terminal/index.jsx

@@ -31,24 +31,24 @@ import {
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, copy } from '../../common/clipboard'
-import { FitAddon } from 'xterm-addon-fit'
+import { FitAddon } from '@xterm/addon-fit'
 import AttachAddon from './attach-addon-custom'
-import { SearchAddon } from 'xterm-addon-search'
-import { WebLinksAddon } from 'xterm-addon-web-links'
-import { CanvasAddon } from 'xterm-addon-canvas'
-import { WebglAddon } from 'xterm-addon-webgl'
-import { LigaturesAddon } from 'xterm-addon-ligatures'
+import { SearchAddon } from '@xterm/addon-search'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { CanvasAddon } from '@xterm/addon-canvas'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { LigaturesAddon } from '@xterm/addon-ligatures'
 import getProxy from '../../common/get-proxy'
 import { AddonZmodem } from './xterm-zmodem'
-import { Unicode11Addon } from 'xterm-addon-unicode11'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
-import { Terminal } from 'xterm'
+import { Terminal } from '@xterm/xterm'
 import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
-import { SerializeAddon } from 'xterm-addon-serialize'
+import { SerializeAddon } from '@xterm/addon-serialize'
 import strip from '@electerm/strip-ansi'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
@@ -66,8 +66,6 @@ class Term extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      pid: '',
-      id: props.id || 'id' + generate(),
       loading: false,
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
@@ -159,18 +157,20 @@ clear\r`
     if (this.zsession) {
       this.onZmodemEnd()
     }
-    delete this.term.parent
+    this.term.parent = null
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
+      this.timers[k] = null
     })
+    this.timers = null
     this.onClose = true
     if (this.socket) {
       this.socket.close()
-      delete this.socket
+      this.socket = null
     }
     if (this.term) {
       this.term.dispose()
-      delete this.term
+      this.term = null
     }
     window.removeEventListener(
       'resize',
@@ -179,13 +179,13 @@ clear\r`
     window.removeEventListener('message', this.handleEvent)
     this.dom.removeEventListener('contextmenu', this.onContextMenu)
     window.removeEventListener('message', this.onContextAction)
-    delete this.dom
-    delete this.attachAddon
-    delete this.fitAddon
-    delete this.zmodemAddon
-    delete this.searchAddon
-    delete this.serializeAddon
-    delete this.fitAddon
+    this.dom = null
+    this.attachAddon = null
+    this.fitAddon = null
+    this.zmodemAddon = null
+    this.searchAddon = null
+    this.serializeAddon = null
+    this.fitAddon = null
   }
 
   terminalConfigProps = [
@@ -239,9 +239,12 @@ clear\r`
 
   timers = {}
 
+  getDomId = () => {
+    return `term-${this.props.tab.id}`
+  }
+
   initEvt = () => {
-    const { id } = this.state
-    const dom = document.getElementById(id)
+    const dom = document.getElementById(this.getDomId())
     this.dom = dom
     dom.addEventListener('contextmenu', this.onContextMenu)
     window.addEventListener(
@@ -261,8 +264,7 @@ clear\r`
   }
 
   isActiveTerminal = () => {
-    return this.props.id === this.props.activeSplitId &&
-    this.props.tab.id === this.props.currentTabId &&
+    return this.props.tab.id === this.props.currentTabId &&
     this.props.pane === paneMap.terminal
   }
 
@@ -323,43 +325,43 @@ clear\r`
       addTimeStampToTermLog,
       type,
       cmd,
-      activeSplitId,
+      currentTabId,
       pid,
       toAll,
       inputOnly,
       zoomValue
     } = e?.data || {}
 
-    const { id: propSplitId } = this.props
-    const { pid: statePid } = this.state
+    const { id: currentTabIdProp } = this.props.tab
+    const tabIdMatch = currentTabId === currentTabIdProp
     if (
       action === terminalActions.zoom &&
-      propSplitId === activeSplitId
+      tabIdMatch
     ) {
       this.zoom(zoomValue)
     } else if (
       action === terminalActions.changeEncode &&
-      propSplitId === activeSplitId
+      tabIdMatch
     ) {
       this.switchEncoding(encode)
     } else if (
       action === terminalActions.batchInput &&
       (
-        toAll || propSplitId === activeSplitId
+        toAll || tabIdMatch
       )
     ) {
       this.batchInput(cmd)
     } else if (
       action === terminalActions.showInfoPanel &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       this.handleShowInfo()
     } else if (
       action === terminalActions.quickCommand &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       e.stopPropagation()
@@ -371,34 +373,34 @@ clear\r`
     } else if (
       action === terminalActions.openTerminalSearch &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       this.toggleSearch()
     } else if (
       action === terminalActions.doSearchNext &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       this.searchNext(keyword, options)
     } else if (
       action === terminalActions.doSearchPrev &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       this.searchPrev(keyword, options)
     } else if (
       action === terminalActions.clearSearch &&
       (
-        propSplitId === activeSplitId
+        tabIdMatch
       )
     ) {
       this.searchAddon.clearDecorations()
     } else if (
       action === commonActions.getTermLogState &&
-      pid === statePid
+      pid === currentTabIdProp
     ) {
       postMessage({
         action: commonActions.returnTermLogState,
@@ -406,11 +408,11 @@ clear\r`
           saveTerminalLogToFile: this.state.saveTerminalLogToFile,
           addTimeStampToTermLog: this.state.addTimeStampToTermLog
         },
-        pid: statePid
+        pid: currentTabIdProp
       })
     } else if (
       action === commonActions.setTermLogState &&
-      pid === statePid
+      pid === currentTabIdProp
     ) {
       this.setState({
         addTimeStampToTermLog,
@@ -423,7 +425,6 @@ clear\r`
       isActiveTerminal
     ) {
       e.stopPropagation()
-      window.store.termFocused = true
       return this.term && this.term.focus()
     }
     if (
@@ -713,7 +714,7 @@ clear\r`
   }
 
   onZmodemEnd = async () => {
-    delete this.zmodemSavePath
+    this.zmodemSavePath = null
     this.onCanceling = true
     if (this.downloadFd) {
       await fs.close(this.downloadFd)
@@ -723,21 +724,21 @@ clear\r`
         console.error
       )
     }
-    delete this.xfer
+    this.xfer = null
     if (this.zsession && this.zsession.close) {
       await this.zsession.close().catch(
         console.error
       )
     }
-    delete this.zsession
+    this.zsession = null
     this.term.focus()
     this.term.write('\r\n')
     this.onZmodem = false
-    delete this.downloadFd
-    delete this.downloadPath
-    delete this.downloadCount
-    delete this.downloadSize
-    delete this.DownloadCache
+    this.downloadFd = null
+    // delete this.downloadPath
+    // delete this.downloadCount
+    // delete this.downloadSize
+    this.DownloadCache = null
   }
 
   onZmodemCatch = (e) => {
@@ -758,10 +759,6 @@ clear\r`
     }
   }
 
-  split = () => {
-    this.props.handleSplit(null, this.props.id)
-  }
-
   onContextAction = e => {
     const {
       action,
@@ -769,6 +766,10 @@ clear\r`
       args = [],
       func
     } = e.data || {}
+    if (action === commonActions.closeContextMenuAfter) {
+      window.removeEventListener('message', this.onContextAction)
+      return false
+    }
     if (
       action !== commonActions.clickContextMenu ||
       id !== this.uid ||
@@ -828,6 +829,12 @@ clear\r`
     this.term.focus()
   }
 
+  onPasteSelected = () => {
+    const selected = this.term.getSelection()
+    this.term.paste(selected || '')
+    this.term.focus()
+  }
+
   toggleSearch = () => {
     window.store.toggleTerminalSearch()
   }
@@ -874,6 +881,12 @@ clear\r`
         disabled: !copyed,
         subText: pasteShortcut
       },
+      {
+        func: 'onPasteSelected',
+        icon: 'SwitcherOutlined',
+        text: e('pasteSelected'),
+        disabled: !hasSlected
+      },
       {
         func: 'onClear',
         icon: 'ReloadOutlined',
@@ -891,11 +904,6 @@ clear\r`
         icon: 'SearchOutlined',
         text: e('search'),
         subText: searchShortcut
-      },
-      {
-        func: 'split',
-        icon: 'BorderHorizontalOutlined',
-        text: e('split')
       }
     ]
   }
@@ -991,7 +999,6 @@ clear\r`
   }
 
   initTerminal = async () => {
-    const { id } = this.state
     // let {password, privateKey, host} = this.props.tab
     const { themeConfig, tab = {}, config = {} } = this.props
     const term = new Terminal({
@@ -1013,9 +1020,9 @@ clear\r`
     // term.onTitleChange(this.onTitleChange)
     term.parent = this
     term.onSelectionChange(this.onSelection)
-    term.open(document.getElementById(id), true)
+    term.open(document.getElementById(this.getDomId()), true)
     this.loadRenderer(term, config)
-    term.textarea.addEventListener('focus', this.setActive)
+    term.textarea.addEventListener('click', this.setActive)
     // term.onKey(this.onKey)
     // term.textarea.addEventListener('blur', this.onBlur)
 
@@ -1040,9 +1047,11 @@ clear\r`
   }
 
   setActive = () => {
-    this.props.setActive(this.props.id)
+    const name = `currentTabId${this.props.batch}`
+    const tabId = this.props.tab.id
     window.store.storeAssign({
-      activeTerminalId: this.props.id
+      currentTabId: tabId,
+      [name]: tabId
     })
   }
 
@@ -1124,13 +1133,14 @@ clear\r`
       keywords = [],
       server = ''
     } = config
-    const { sessionId, terminalIndex, id, logName } = this.props
+    const { sessionId, logName } = this.props
     const tab = window.store.applyProfileToTabs(deepCopy(this.props.tab || {}))
     const {
       srcId, from = 'bookmarks',
       type,
       term: terminalType,
-      displayRaw
+      displayRaw,
+      id
     } = tab
     const { savePassword } = this.state
     const isSshConfig = type === terminalSshConfigType
@@ -1161,8 +1171,8 @@ clear\r`
       keepaliveInterval: tab.keepaliveInterval === undefined ? config.keepaliveInterval : tab.keepaliveInterval,
       sessionId,
       tabId: id,
+      uid: id,
       srcTabId: tab.id,
-      terminalIndex,
       termType,
       readyTimeout: config.sshReadyTimeout,
       proxy: getProxy(tab, config),
@@ -1170,14 +1180,13 @@ clear\r`
         ? typeMap.remote
         : typeMap.local
     })
-    delete opts.terminals
-    let pid = await createTerm(opts)
+    let r = await createTerm(opts)
       .catch(err => {
         const text = err.message
         handleErr({ message: text })
       })
-    pid = pid || ''
-    if (pid.includes('fail')) {
+    r = r || ''
+    if (r.includes('fail')) {
       return this.promote()
     }
     if (savePassword) {
@@ -1186,24 +1195,18 @@ clear\r`
     this.setState({
       loading: false
     })
-    if (!pid) {
+    if (!r) {
       this.setStatus(statusMap.error)
       return
     }
     this.setStatus(statusMap.success)
-    this.props.setSessionState({
-      pid
-    })
-    term.pid = pid
-    this.pid = pid
-    this.setState({
-      pid
-    })
+    term.pid = id
+    this.pid = id
     const hs = server
       ? server.replace(/https?:\/\//, '')
       : `${host}:${port}`
     const pre = server.startsWith('https') ? 'wss' : 'ws'
-    const wsUrl = `${pre}://${hs}/terminals/${pid}?sessionId=${sessionId}&token=${tokenElecterm}`
+    const wsUrl = `${pre}://${hs}/terminals/${id}?sessionId=${sessionId}&token=${tokenElecterm}`
     const socket = new WebSocket(wsUrl)
     socket.onclose = this.oncloseSocket
     socket.onerror = this.onerrorSocket
@@ -1234,6 +1237,7 @@ clear\r`
       new KeywordHighlighterAddon(keywords)
     )
     window.store.triggerResize()
+    window.store.focus()
   }
 
   onResize = throttle(() => {
@@ -1268,7 +1272,7 @@ clear\r`
       return false
     }
     if (this.userTypeExit) {
-      return this.props.delSplit(this.state.id)
+      return this.props.delTab(this.props.tab.id)
     }
     const key = `open${Date.now()}`
     function closeMsg () {
@@ -1285,7 +1289,7 @@ clear\r`
             type='primary'
             onClick={() => {
               closeMsg()
-              this.props.delSplit(this.state.id)
+              this.props.delTab(this.props.tab.id)
             }}
           >
             {e('close')}
@@ -1331,7 +1335,10 @@ clear\r`
       isRemote: this.isRemote(),
       isActive: this.isActiveTerminal()
     }
-    this.props.handleShowInfo(infoProps)
+    window.store.setState(
+      'terminalInfoProps',
+      infoProps
+    )
   }
 
   // getPwd = async () => {
@@ -1354,13 +1361,17 @@ clear\r`
   }
 
   render () {
-    const { id, loading } = this.state
-    const { height, width, left, top, position, id: pid, activeSplitId } = this.props
-    const cls = classnames('term-wrap', {
-      'not-first-term': !!position
-    }, 'tw-' + pid, {
-      'terminal-not-active': activeSplitId !== pid
-    })
+    const { loading } = this.state
+    const { height, width, left, top } = this.props
+    const { id } = this.props.tab
+    const isActive = this.isActiveTerminal()
+    const cls = classnames(
+      'term-wrap',
+      'tw-' + id,
+      {
+        'terminal-not-active': !isActive
+      }
+    )
     const prps1 = {
       className: cls,
       style: {
@@ -1368,7 +1379,7 @@ clear\r`
         width,
         left,
         top,
-        zIndex: position / 10
+        zIndex: 10
       },
       onDrop: this.onDrop
     }
@@ -1378,8 +1389,9 @@ clear\r`
     //   id: `${id}-file-sel`,
     //   className: 'hide'
     // }
-    const prps2 = {
-      className: 'absolute term-wrap-1',
+    const prps3 = {
+      id: this.getDomId(),
+      className: 'absolute term-wrap-2',
       style: {
         left: '10px',
         top: '10px',
@@ -1387,31 +1399,17 @@ clear\r`
         bottom: 0
       }
     }
-    const prps3 = {
-      id,
-      className: 'absolute term-wrap-2',
-      style: {
-        left: 0,
-        top: 0,
-        height: '100%',
-        width: '100%'
-      }
-    }
     return (
       <div
         {...prps1}
       >
         <div
-          {...prps2}
-        >
-          <div
-            {...prps3}
-          />
-          <NormalBuffer
-            lines={this.state.lines}
-            close={this.closeNormalBuffer}
-          />
-        </div>
+          {...prps3}
+        />
+        <NormalBuffer
+          lines={this.state.lines}
+          close={this.closeNormalBuffer}
+        />
         <Spin className='loading-wrapper' spinning={loading} />
       </div>
     )