@electerm/electerm-react 1.50.66 → 1.51.0

package/client/components/tabs/index.jsx

@@ -24,8 +24,9 @@ import {
   TwoRowsRightIcon,
   TwoColumnsBottomIcon
 } from '../icons/split-icons'
-import { Dropdown, Popover } from 'antd'
+import { Dropdown, Popover, Button } from 'antd'
 import Tab from './tab'
+import LogoElem from '../common/logo-elem.jsx'
 import './tabs.styl'
 import {
   tabWidth,
@@ -71,7 +72,7 @@ export default class Tabs extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (
-      prevProps.currentTabId !== this.props.currentTabId ||
+      prevProps.currentBatchTabId !== this.props.currentBatchTabId ||
       prevProps.width !== this.props.width ||
       (prevProps.tabs || []).length !== (this.props.tabs || []).length
     ) {
@@ -88,6 +89,14 @@ export default class Tabs extends React.Component {
     runIdle(() => this.setState(...args))
   }
 
+  handleNewTab = () => {
+    window.store.addTab(undefined, undefined, this.props.batch)
+  }
+
+  handleNewSsh = () => {
+    window.store.onNewSsh()
+  }
+
   onEvent = (e) => {
     const {
       action,
@@ -204,16 +213,22 @@ export default class Tabs extends React.Component {
     if (!e.target.className.includes('tabs-wrapper')) {
       return
     }
-    this.props.addTab()
+    window.store.addTab(
+      undefined, undefined,
+      this.props.batch
+    )
   }
 
   handleTabAdd = () => {
-    this.props.addTab()
+    window.store.addTab(
+      undefined, undefined,
+      this.props.batch
+    )
   }
 
   adjustScroll = () => {
-    const { tabs, currentTabId, batch } = this.props
-    const index = findIndex(tabs, t => t.id === currentTabId)
+    const { tabs, currentBatchTabId, batch } = this.props
+    const index = findIndex(tabs, t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
     ).slice(0, index + 2).reduce((prev, c) => {
@@ -260,7 +275,7 @@ export default class Tabs extends React.Component {
 
   handleClickMenu = ({ key }) => {
     const id = key.split('##')[1]
-    this.props.onChangeTabId(id)
+    window.store['currentTabId' + this.props.batch] = id
   }
 
   handleChangeLayout = ({ key }) => {
@@ -312,6 +327,7 @@ export default class Tabs extends React.Component {
       <Popover
         content={this.renderMenus()}
         onOpenChange={this.handleOpenChange}
+        placement='bottomRight'
       >
         <PlusOutlined
           title={e('openNewTerm')}
@@ -421,7 +437,8 @@ export default class Tabs extends React.Component {
                 tab,
                 isLast,
                 receiveData: receiveDataTabId === tab.id,
-                openContextMenu: onContextMenuTabId === tab.id
+                openContextMenu: onContextMenuTabId === tab.id,
+                tabIndex: i
               }
               if (this.state.contextFuncTabId === tab.id) {
                 tabProps.contextFunc = this.state.contextFunc
@@ -522,7 +539,7 @@ export default class Tabs extends React.Component {
     return null
   }
 
-  render () {
+  renderTabs () {
     const { overflow } = this.state
     return (
       <div className='tabs' ref={this.tabsRef} onContextMenu={this.handleContextMenu}>
@@ -538,4 +555,48 @@ export default class Tabs extends React.Component {
       </div>
     )
   }
+
+  renderNoSession = () => {
+    const props = {
+      style: {
+        height: this.props.height + 'px'
+      }
+    }
+    return (
+      <div className='no-sessions electerm-logo-bg' {...props}>
+        <Button
+          onClick={this.handleNewTab}
+          size='large'
+          className='mg1r mg1b add-new-tab-btn'
+        >
+          {e('newTab')}
+        </Button>
+        <Button
+          onClick={this.handleNewSsh}
+          size='large'
+          className='mg1r mg1b'
+        >
+          {e('newBookmark')}
+        </Button>
+        <div className='pd3'>
+          <LogoElem />
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      tabs
+    } = this.props
+    if (!tabs || !tabs.length) {
+      return (
+        <div className='tabs-outer'>
+          {this.renderTabs()}
+          {this.renderNoSession()}
+        </div>
+      )
+    }
+    return this.renderTabs()
+  }
 }

package/client/components/tabs/on-tab-drop.js

@@ -0,0 +1,25 @@
+export default function onDrop (e, batch, onDropElem) {
+  e.preventDefault()
+  const { target } = e
+  if (!target) {
+    return
+  }
+  let currentElement = target
+  while (currentElement) {
+    if (currentElement.classList && currentElement.classList.contains('tab')) {
+      return
+    }
+    currentElement = currentElement.parentElement
+  }
+  const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+  if (!onDropElem || !fromTab || fromTab.batch === batch) {
+    return
+  }
+  const { store } = window
+  const { tabs } = store
+  const t = tabs.find(t => t.id === fromTab.id)
+  if (!t) {
+    return
+  }
+  t.batch = batch
+}

package/client/components/tabs/tab.jsx

@@ -3,7 +3,6 @@
  */
 
 import { Component } from 'react'
-import runIdle from '../../common/run-idle'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
@@ -11,8 +10,7 @@ import {
 } from '@ant-design/icons'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
-import copy from 'json-deep-copy'
-import { isEqual, findIndex, some, pick } from 'lodash-es'
+import { findIndex, pick } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
@@ -26,24 +24,12 @@ const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
 class Tab extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      tab: copy(props.tab)
-    }
-  }
-
   componentDidMount () {
-    this.dom = document.getElementById('tab-' + this.state.tab.id)
+    this.dom = document.getElementById('tab-' + this.props.tab.id)
     window.addEventListener('message', this.onEvent)
   }
 
   componentDidUpdate (prevProps) {
-    if (!isEqual(prevProps.tab, this.props.tab)) {
-      this.setState({
-        tab: copy(this.props.tab)
-      })
-    }
     if (this.props.openContextMenu && !prevProps.openContextMenu) {
       this.handleContextMenu()
     }
@@ -56,35 +42,27 @@ class Tab extends Component {
     this.dom = null
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return this.shouldUpdate(this.props, nextProps) || this.shouldUpdateState(this.state, nextState)
-  }
-
-  shouldUpdateState = (prevState, nextState) => {
-    return !isEqual(prevState, nextState)
-  }
-
-  shouldUpdate = (prevProps, nextProps) => {
-    // todo currentTabId still need improve
-    const pickKeys = [
-      'currentTabId',
-      'height',
-      'isLast',
-      'isMaximized',
-      'config',
-      'tab',
-      'width',
-      'openContextMenu',
-      'contextFunc'
-    ]
-
-    // compare only the relevant props
-    return !isEqual(pick(prevProps, pickKeys), pick(nextProps, pickKeys))
-  }
-
-  modifier = (...args) => {
-    runIdle(() => this.setState(...args))
-  }
+  // shouldComponentUpdate (nextProps) {
+  //   return this.shouldUpdate(this.props, nextProps)
+  // }
+
+  // shouldUpdate = (prevProps, nextProps) => {
+  //   // todo currentTabId still need improve
+  //   const pickKeys = [
+  //     'currentTabId',
+  //     'height',
+  //     'isLast',
+  //     'isMaximized',
+  //     'config',
+  //     'tab',
+  //     'width',
+  //     'openContextMenu',
+  //     'contextFunc'
+  //   ]
+
+  //   // compare only the relevant props
+  //   return !isEqual(pick(prevProps, pickKeys), pick(nextProps, pickKeys))
+  // }
 
   clearCls = () => {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
@@ -93,11 +71,7 @@ class Tab extends Component {
   }
 
   handleClick = (e) => {
-    const {
-      onChangeTabId
-    } = this.props
-    const { id } = this.state.tab
-    onChangeTabId(id)
+    window.store.clickTab(this.props.tab.id, this.props.batch)
   }
 
   onDrag = () => {
@@ -131,7 +105,7 @@ class Tab extends Component {
   onDragStart = e => {
     // debug('ondragstart')
     // debug(e.target)
-    e.dataTransfer.setData('fromFile', JSON.stringify(this.state.tab))
+    e.dataTransfer.setData('fromFile', JSON.stringify(this.props.tab))
     // e.effectAllowed = 'copyMove'
   }
 
@@ -141,45 +115,49 @@ class Tab extends Component {
     if (!target) {
       return
     }
-    // debug('target drop', target)
+
     const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
     const onDropTab = document.querySelector('.' + onDragOverCls)
     if (!onDropTab || !fromTab) {
       return
     }
+
     const dropId = onDropTab.getAttribute('data-id')
     if (!dropId || dropId === fromTab.id) {
       return
     }
+
     const { id } = fromTab
-    const tabs = copy(this.props.tabs)
-    let indexDrop = findIndex(tabs, t => t.id === dropId)
-    const dropTab = tabs[indexDrop]
-    const indexFrom = findIndex(tabs, t => t.id === id)
-    if (indexFrom === -1) {
+    const storeTabs = window.store.tabs
+    const indexFrom = findIndex(storeTabs, t => t.id === id)
+    let indexDrop = findIndex(storeTabs, t => t.id === dropId)
+
+    if (indexFrom >= 0 && indexDrop >= 0) {
+      const targetTab = storeTabs[indexDrop]
       const fromBatch = fromTab.batch
-      setTimeout(() => {
-        const closeBtn = document.querySelector(`.v${fromBatch + 1} .tab-${id} .tab-close .anticon`)
-        if (closeBtn) {
-          closeBtn.click()
-        }
-      }, 10)
-      fromTab.batch = dropTab.batch
-    } else {
-      if (indexDrop > indexFrom) {
+
+      // Handle currentTab change if needed
+      if (window.store[`currentTabId${fromBatch}`] === id && fromBatch !== targetTab.batch) {
+        // Find next tab in the same batch
+        const nextTab = storeTabs.find((t, i) =>
+          i !== indexFrom && t.batch === fromBatch
+        )
+        window.store[`currentTabId${fromBatch}`] = nextTab ? nextTab.id : ''
+      }
+
+      // Reorder tabs and update batch
+      const [tab] = storeTabs.splice(indexFrom, 1)
+      tab.batch = targetTab.batch // Update the batch to match target tab's batch
+      if (indexFrom < indexDrop) {
         indexDrop = indexDrop - 1
       }
-      tabs.splice(indexFrom, 1)
+      storeTabs.splice(indexDrop, 0, tab)
+      window.store.focus()
     }
-    tabs.splice(indexDrop, 0, fromTab)
-    this.props.setTabs(
-      tabs
-    )
-    window.store.focus()
   }
 
   handleReloadTab = async () => {
-    this.props.reloadTab(this.state.tab)
+    window.store.reloadTab(this.props.tab.id)
   }
 
   onDragEnd = e => {
@@ -189,17 +167,17 @@ class Tab extends Component {
   }
 
   handleClose = () => {
-    this.props.delTab(this.state.tab.id)
+    window.store.delTab(this.props.tab.id)
   }
 
   handleDup = () => {
-    this.props.onDuplicateTab(
-      this.state.tab
+    window.store.duplicateTab(
+      this.props.tab.id
     )
   }
 
   cloneToNextLayout = () => {
-    window.store.cloneToNextLayout()
+    window.store.cloneToNextLayout(this.props.tab)
   }
 
   newTab = () => {
@@ -207,67 +185,42 @@ class Tab extends Component {
   }
 
   doRename = () => {
-    const tab = copy(this.state.tab)
+    const { tab } = this.props
     tab.titleTemp = tab.title || ''
     tab.isEditting = true
-    this.setState({
-      tab
-    })
   }
 
   handleBlur = () => {
-    const tab = copy(this.state.tab)
-    const { titleTemp, title, id, host } = tab
+    const { tab } = this.props
+    const { titleTemp, title, host } = tab
     if (!titleTemp && !host) {
       return message.warning(e('titleEmptyWarn'))
     }
     delete tab.isEditting
     if (title === titleTemp) {
       delete tab.titleTemp
-      return this.setState({
-        tab
-      })
     }
-    this.setState({
-      tab
-    })
-    this.props.editTab(id, { title: titleTemp })
+    tab.title = titleTemp
   }
 
   handleChange = e => {
+    const { tab } = this.props
     const titleTemp = e.target.value
-    const tab = copy(this.state.tab)
     tab.titleTemp = titleTemp
-    this.setState({
-      tab
-    })
   }
 
   closeOther = () => {
-    const { setTabs, onChangeTabId } = this.props
-    onChangeTabId(this.props.tab.id)
-    setTabs([this.props.tab])
+    window.store.closeOtherTabs(this.props.tab.id)
   }
 
   closeTabsRight = () => {
-    const {
-      tab, currentTabId,
-      onChangeTabId,
-      setTabs
-    } = this.props
-    let tabs = copy(this.props.tabs)
-    const index = findIndex(tabs, t => t.id === tab.id)
-    tabs = tabs.slice(0, index + 1)
-    if (!some(tabs, t => t.id === currentTabId)) {
-      onChangeTabId(tabs[0].id)
-    }
-    setTabs(tabs)
+    window.store.closeTabsRight(this.props.tab.id)
   }
 
   renderContext = () => {
-    const { tabs, tab } = this.props
+    const { tabs, tab, tabIndex } = this.props
     const len = tabs.length
-    const index = findIndex(tabs, t => t.id === tab.id)
+    const index = tabIndex
     const noRight = index >= len - 1
     const isSshConfig = tab.type === terminalSshConfigType
     const res = []
@@ -332,7 +285,7 @@ class Tab extends Component {
         left: rect.left,
         top: rect.top + 20
       },
-      id: this.state.tab.id
+      id: this.props.tab.id
     })
   }
 
@@ -352,7 +305,6 @@ class Tab extends Component {
     )
   }
 
-  // sshTunnelResults is a array of { sshTunnel, error? }, sshTunnel is a object has props of sshTunnelLocalPort, sshTunnelRemoteHost, sshTunnelRemotePort, sshTunnel, sshTunnelLocalHost, should build sshTunnel string from sshTunnel object, when error exist, this string should start with "error:", return title and sshTunnelResults list in react element.
   renderTitle = (sshTunnelResults, title) => {
     const list = sshTunnelResults.map(({ sshTunnel: obj, error }, i) => {
       const {
@@ -396,11 +348,7 @@ class Tab extends Component {
   }
 
   render () {
-    const {
-      currentTabId
-    } = this.props
-    const { isLast, terminalOnData } = this.props
-    const { tab } = this.state
+    const { isLast, terminalOnData, tab, currentBatchTabId } = this.props
     const {
       id,
       isEditting,
@@ -408,7 +356,7 @@ class Tab extends Component {
       isTransporting,
       sshTunnelResults
     } = tab
-    const active = id === currentTabId
+    const active = id === currentBatchTabId
     const cls = classnames(
       `tab-${id}`,
       'tab',

package/client/components/tabs/tabs.styl

@@ -4,6 +4,7 @@
   height 36px
   overflow hidden
   background main-dark
+  z-index 12
   ::-webkit-scrollbar
     width 0
     display none
@@ -212,4 +213,14 @@
     display none
 .tab-title-tag
   margin-right 5px
-  font-size 14px
+  font-size 14px
+.no-sessions
+  background main-dark
+  text-align center
+  padding 50px 0
+  position absolute
+  top 36px
+  left 0
+  right 0
+  bottom 0
+  z-index 11

package/client/components/terminal/index.jsx

@@ -86,8 +86,8 @@ class Term extends Component {
 
   componentDidUpdate (prevProps) {
     const shouldChange = (
-      prevProps.currentTabId !== this.props.currentTabId &&
-      this.props.tab.id === this.props.currentTabId &&
+      prevProps.currentBatchTabId !== this.props.currentBatchTabId &&
+      this.props.tab.id === this.props.currentBatchTabId &&
       this.props.pane === paneMap.terminal
     ) || (
       this.props.pane !== prevProps.pane &&
@@ -120,7 +120,10 @@ class Term extends Component {
       prevProps.themeConfig
     )
     if (themeChanged) {
-      this.term.options.theme = deepCopy(this.props.themeConfig)
+      this.term.options.theme = {
+        ...deepCopy(this.props.themeConfig),
+        background: 'rgba(0,0,0,0)'
+      }
     }
 
     const sftpPathFollowSshChanged = !isEqual(
@@ -268,7 +271,7 @@ clear\r`
   }
 
   isActiveTerminal = () => {
-    return this.props.tab.id === this.props.currentTabId &&
+    return this.props.tab.id === this.props.currentBatchTabId &&
     this.props.pane === paneMap.terminal
   }
 
@@ -995,12 +998,14 @@ clear\r`
   initTerminal = async () => {
     // let {password, privateKey, host} = this.props.tab
     const { themeConfig, tab = {}, config = {} } = this.props
+    const tc = deepCopy(themeConfig)
+    tc.background = 'rgba(0,0,0,0)'
     const term = new Terminal({
       allowProposedApi: true,
       scrollback: config.scrollback,
       rightClickSelectsWord: config.rightClickSelectsWord || false,
       fontFamily: tab.fontFamily || config.fontFamily,
-      theme: themeConfig,
+      theme: tc,
       allowTransparency: true,
       // lineHeight: 1.2,
       wordSeparator: config.terminalWordSeparator,
@@ -1230,7 +1235,7 @@ clear\r`
   }
 
   onResize = throttle(() => {
-    const cid = this.props.currentTabId
+    const cid = this.props.currentBatchTabId
     const tid = this.props.tab?.id
     if (
       this.props.tab.status === statusMap.success &&

package/client/components/terminal/terminal-interactive.jsx

@@ -5,9 +5,7 @@
 import { useEffect, useState } from 'react'
 import { Modal, Form, Button } from 'antd'
 import InputAutoFocus from '../common/input-auto-focus'
-import { tabActions } from '../../common/constants'
 import wait from '../../common/wait'
-import postMsg from '../../common/post-msg'
 
 const e = window.translate
 const FormItem = Form.Item
@@ -17,11 +15,7 @@ export default function TermInteractive () {
   const [opts, setter] = useState(null)
   const [form] = Form.useForm()
   function updateTab (data) {
-    postMsg({
-      action: tabActions.updateTabs,
-      id: data.tabId,
-      update: data.update
-    })
+    window.store.updateTab(data.tabId, data.update)
   }
   function onMsg (e) {
     if (

package/client/components/terminal/terminal.styl

@@ -32,11 +32,10 @@
   margin-left 5px
 
 #container
-  .xterm-viewport
+  .xterm-screen
     background-repeat no-repeat
     background-position center
     background-color: transparent !important
-    z-index 1
 
 
 .terminal-not-active .xterm-text-layer

package/client/components/theme/theme-form.jsx

@@ -267,7 +267,7 @@ export default function ThemeForm (props) {
       >
         <div className='mg1b fix'>
           <span className='fleft'>
-            <Space compact>
+            <Space>
               <Button
                 type='dashed'
                 onClick={handleSwitchEditor}