@electerm/electerm-react 1.51.3 → 1.51.18

package/client/common/constants.js

@@ -98,7 +98,6 @@ export const paneMap = buildConst([
 export const settingMap = buildConst([
   'setting',
   'bookmarks',
-  'history',
   'terminalThemes',
   'bookmarkGroups',
   'quickCommands',
@@ -307,6 +306,7 @@ export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-
 export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
+export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const modals = {
   hide: 0,
   setting: 1,
@@ -398,3 +398,17 @@ export const syncDataMaps = {
   profiles: ['profiles'],
   addressBookmarks: ['addressBookmarks']
 }
+export const terminalTypes = [
+  'xterm-256color',
+  'xterm-new',
+  'xterm-color',
+  'xterm-vt220',
+  'xterm',
+  'linux',
+  'vt100',
+  'ansi',
+  'rxvt'
+]
+export const sshConfigLoadKey = 'ssh-config-loaded'
+export const sshConfigKey = 'ignore-ssh-config'
+export const connectionHoppingWarnKey = 'connectionHoppingWarnned'

package/client/common/db.js

@@ -5,7 +5,7 @@
 import {
   settingMap
 } from '../common/constants'
-import { without, isArray, findIndex } from 'lodash-es'
+import { without, isArray } from 'lodash-es'
 import handleError from './error-handler'
 import generate from './uid'
 import safeParse from './to-simple-obj'
@@ -30,8 +30,7 @@ export const dbNames = without(
 
 export const dbNamesForWatch = without(
   Object.keys(settingMap),
-  settingMap.setting,
-  settingMap.history
+  settingMap.setting
 )
 
 /**
@@ -146,10 +145,12 @@ export async function getData (name) {
 export async function fetchInitData (dbName) {
   const res = await find(dbName)
   const order = await getData(`${dbName}:order`)
-  const r = res.sort((a, b) => {
-    const ai = findIndex(order, r => r === a.id)
-    const bi = findIndex(order, r => r === b.id)
-    return ai - bi
-  })
-  return JSON.stringify(r)
+  if (order && order.length) {
+    res.sort((a, b) => {
+      const ai = order.findIndex(r => r === a.id)
+      const bi = order.findIndex(r => r === b.id)
+      return ai - bi
+    })
+  }
+  return JSON.stringify(res)
 }

package/client/common/default-setting.js

@@ -39,7 +39,6 @@ export default {
   initDefaultTabOnStart: true,
   screenReaderMode: false,
   autoRefreshWhenSwitchToSftp: false,
-  hideSshConfig: false,
   addTimeStampToTermLog: false,
   sftpPathFollowSsh: false,
   keepaliveInterval: 0,

package/client/common/is-color-dark.js

@@ -17,17 +17,21 @@ function expandShorthandColor (color) {
 }
 
 export default function isColorDark (_color) {
-  let color = expandShorthandColor(_color)
-  if (color.charAt(0) === '#') {
-    color = color.slice(1) // Remove the '#' if present
-  }
-  const r = parseInt(color.substr(0, 2), 16)
-  const g = parseInt(color.substr(2, 2), 16)
-  const b = parseInt(color.substr(4, 2), 16)
+  try {
+    let color = expandShorthandColor(_color)
+    if (color.charAt(0) === '#') {
+      color = color.slice(1) // Remove the '#' if present
+    }
+    const r = parseInt(color.substr(0, 2), 16)
+    const g = parseInt(color.substr(2, 2), 16)
+    const b = parseInt(color.substr(4, 2), 16)
 
-  // Formula to determine brightness
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+    // Formula to determine brightness
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000
 
-  // Decide based on brightness threshold
-  return brightness < 128 // You can adjust this threshold as needed
+    // Decide based on brightness threshold
+    return brightness < 128 // You can adjust this threshold as needed
+  } catch (e) {
+    return true
+  }
 }

package/client/common/new-terminal.js

@@ -11,11 +11,11 @@ const e = window.translate
 window.et.tabCount = 0
 
 export function updateCount (tab) {
-  tab.tabCount = window.et.tabCount
   window.et.tabCount++
+  return window.et.tabCount
 }
 
-export default (removeTitle, noUpdateCount) => {
+export default (removeTitle) => {
   const res = {
     id: uid(),
     status: 'processing',
@@ -25,8 +25,5 @@ export default (removeTitle, noUpdateCount) => {
   if (removeTitle) {
     delete res.title
   }
-  if (!noUpdateCount) {
-    updateCount(res)
-  }
   return res
 }

package/client/common/reverse-color.js

@@ -0,0 +1,12 @@
+export function getReverseColor (hex) {
+  // Check if the input is a valid hex color code
+  if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
+    return '#0088cc'
+  }
+  // Convert the hex color code to an integer
+  const num = parseInt(hex.slice(1), 16)
+  // Bitwise XOR the integer with 0xFFFFFF to get the reverse color
+  const reverse = num ^ 0xFFFFFF
+  // Convert the reverse color to a hex string and pad with zeros if needed
+  return '#' + reverse.toString(16).padStart(6, '0')
+}

package/client/common/ws.js

@@ -5,6 +5,7 @@
 import generate from './uid'
 import wait from './wait'
 import copy from 'json-deep-copy'
+import { pick } from 'lodash-es'
 
 const onces = {}
 const wss = {}
@@ -151,7 +152,9 @@ export default (type, id, sessionId = '', sftpId = '', persist) => {
         id,
         sessionId,
         sftpId,
-        window.store.config
+        pick(window.store.config, [
+          'host', 'port', 'tokenElecterm'
+        ])
       ]
     })
     onces[id] = {

package/client/components/batch-op/batch-op.jsx

@@ -173,11 +173,15 @@ export default class BatchOp extends PureComponent {
   run = async (conf, index) => {
     this.updateState('working', index)
     let tab = await this.createTab(conf)
-      .then(r => r)
       .catch(err => {
+        console.log('create tab error', err)
+        if (this.ref) {
+          this.ref.stop()
+          delete this.ref
+        }
         return 'Error: ' + err.message
       })
-    if (!tab) {
+    if (typeof tab === 'string') {
       return this.updateState(tab, index)
     }
 
@@ -189,9 +193,16 @@ export default class BatchOp extends PureComponent {
     }
     if (conf.remotePath) {
       this.updateState('creating sftp', index)
-      tab = await this.createSftp(tab)
-      if (!tab) {
-        return this.updateState('Error: ' + tab, index)
+      tab = await this.createSftp(tab).catch(err => {
+        console.log('create sftp error', err)
+        if (this.ref2) {
+          this.ref2.stop()
+          delete this.ref2
+        }
+        return 'Error: ' + err.message
+      })
+      if (typeof tab === 'string') {
+        return this.updateState(tab, index)
       }
       this.updateState('sftp created', index)
       this.updateState('transferring file', index)

package/client/components/bookmark-form/index.jsx

@@ -125,7 +125,7 @@ export default class BookmarkIndex extends PureComponent {
     const {
       type
     } = this.props
-    if (type !== settingMap.bookmarks && type !== settingMap.history) {
+    if (type !== settingMap.bookmarks) {
       return null
     }
     const { ready } = this.state

package/client/components/bookmark-form/render-connection-hopping.jsx

@@ -6,7 +6,10 @@ import {
   Button,
   Table
 } from 'antd'
-import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import {
+  formItemLayout,
+  tailFormItemLayout
+} from '../../common/form-layout'
 import {
   MinusCircleFilled,
   PlusOutlined
@@ -14,10 +17,13 @@ import {
 import RenderAuth from './render-auth-ssh'
 import uid from '../../common/uid'
 import {
-  authTypeMap
+  authTypeMap,
+  connectionHoppingWarnKey
 } from '../../common/constants'
 import { useState } from 'react'
+import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
 import BookmarkSelect from './bookmark-select'
+import * as ls from '../../common/safe-local-storage'
 
 const FormItem = Form.Item
 const RadioButton = Radio.Button
@@ -35,6 +41,12 @@ export default function renderConnectionHopping (props) {
     port: 22,
     authType: authTypeMap.password
   })
+  const [showWarn, setShowWarn] = useState(
+    window.store.hasOldConnectionHoppingBookmark && ls.getItem(connectionHoppingWarnKey) !== 'yes'
+  )
+  function closeWarn () {
+    setShowWarn(false)
+  }
   const [list, setList] = useState(formData.connectionHoppings || [])
   function onChangeAuthType (e) {
     editState(old => {
@@ -139,6 +151,16 @@ export default function renderConnectionHopping (props) {
       </FormItem>
     )
   }
+  function renderWarn () {
+    if (!showWarn) {
+      return null
+    }
+    return (
+      <FormItem {...tailFormItemLayout}>
+        <ConnectionHoppingWarningText closeWarn={closeWarn} />
+      </FormItem>
+    )
+  }
   const treeProps = {
     bookmarks: store.bookmarks.filter(d => {
       return d.host && d.port && d.username
@@ -160,6 +182,7 @@ export default function renderConnectionHopping (props) {
         initialValues={initialValues}
       >
         {renderList()}
+        {renderWarn()}
         <FormItem
           {...formItemLayout}
           label={e('chooseFromBookmarks')}

package/client/components/bookmark-form/ssh-form.jsx

@@ -5,7 +5,7 @@ import { PureComponent } from 'react'
 import {
   message
 } from 'antd'
-import { findIndex, uniq, isEqual, pick } from 'lodash-es'
+import { uniq, isEqual, pick } from 'lodash-es'
 import copy from 'json-deep-copy'
 import generate from '../../common/uid'
 import {
@@ -96,13 +96,11 @@ export default class BookmarkForm extends PureComponent {
   }
 
   updateBookmarkGroups = (bookmarkGroups, bookmark, categoryId) => {
-    let index = findIndex(
-      bookmarkGroups,
+    let index = bookmarkGroups.findIndex(
       bg => bg.id === categoryId
     )
     if (index < 0) {
-      index = findIndex(
-        bookmarkGroups,
+      index = bookmarkGroups.findIndex(
         bg => bg.id === defaultBookmarkGroupId
       )
     }
@@ -167,19 +165,6 @@ export default class BookmarkForm extends PureComponent {
     const bookmarkGroups = copy(
       this.props.bookmarkGroups
     )
-    if (type === settingMap.history) {
-      obj.id = generate()
-      runIdle(() => {
-        addItem(obj, settingMap.bookmarks)
-      })
-      this.updateBookmarkGroups(
-        bookmarkGroups,
-        obj,
-        categoryId
-      )
-      message.success('OK', 3)
-      return
-    }
     if (!obj.id.startsWith(newBookmarkIdPrefix)) {
       const tar = copy(obj)
       delete tar.id
@@ -196,11 +181,6 @@ export default class BookmarkForm extends PureComponent {
       }
     } else {
       obj.id = generate()
-      if (evt !== 'save' && evt !== 'saveAndCreateNew') {
-        runIdle(() => {
-          addItem(obj, settingMap.history)
-        })
-      }
       runIdle(() => {
         addItem(obj, settingMap.bookmarks)
       })
@@ -217,8 +197,7 @@ export default class BookmarkForm extends PureComponent {
   }
 
   setNewItem = (
-    settingItem = getInitItem([],
-      settingMap.bookmarks)
+    settingItem = getInitItem([], settingMap.bookmarks)
   ) => {
     const { store } = this.props
     this.props.store.storeAssign({

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

@@ -4,22 +4,17 @@ import {
   Button
 } from 'antd'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
+import deepCopy from 'json-deep-copy'
 
 const e = window.translate
 
 export default class BookmarkTreeDelete extends StartSessionSelect {
   onExpand = (expandedKeys) => {
-    window.store.setState(
-      'expandedKeys',
-      expandedKeys
-    )
+    window.store.expandedKeys = deepCopy(expandedKeys)
   }
 
   onCheck = (checkedKeys) => {
-    window.store.setState(
-      'checkedKeys',
-      checkedKeys
-    )
+    window.store.checkedKeys = deepCopy(checkedKeys)
   }
 
   handleDel = () => {
@@ -42,13 +37,13 @@ export default class BookmarkTreeDelete extends StartSessionSelect {
     const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
     store.delItems(arr, settingMap.bookmarks)
     store.delItems(arr, settingMap.bookmarkGroups)
-    store.setState('checkedKeys', [])
+    store.checkedKeys = []
   }
 
   handleCancel = () => {
     const { store } = window
     store.bookmarkSelectMode = false
-    store.setState('checkedKeys', [])
+    store.checkedKeys = []
   }
 
   render () {

package/client/components/bookmark-form/use-submit.jsx

@@ -10,9 +10,6 @@ import {
   Button,
   Form
 } from 'antd'
-import {
-  settingMap
-} from '../../common/constants'
 import { tailFormItemLayout } from '../../common/form-layout'
 import useFuncs from './use-form-funcs'
 
@@ -37,18 +34,12 @@ export default function useBookmarkSubmit (props) {
           className='mg1r mg1b'
         >{e('saveAndConnect')}
         </Button>
-        {
-          settingMap.history === props.type
-            ? null
-            : (
-              <Button
-                type='primary'
-                className='mg1r mg1b'
-                onClick={saveAndCreateNew}
-              >{e('saveAndCreateNew')}
-              </Button>
-              )
-        }
+        <Button
+          type='primary'
+          className='mg1r mg1b'
+          onClick={saveAndCreateNew}
+        >{e('saveAndCreateNew')}
+        </Button>
         <Button
           type='dashed'
           className='mg1r mg1b'

package/client/components/bookmark-form/use-ui.jsx

@@ -16,7 +16,7 @@ import {
 import { formItemLayout } from '../../common/form-layout'
 import defaultSettings from '../../common/default-setting'
 import mapper from '../../common/auto-complete-data-mapper'
-import { defaultEnvLang } from '../../common/constants'
+import { defaultEnvLang, terminalTypes } from '../../common/constants'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -26,7 +26,6 @@ export default function useBookmarkFormUI (props) {
     fontFamily: defaultFontFamily,
     fontSize: defaultFontSize
   } = defaultSettings
-  const { terminalTypes } = props.store.config
   return [
     <FormItem
       {...formItemLayout}

package/client/components/common/connection-hopping-warning-text.jsx

@@ -0,0 +1,36 @@
+import {
+  Button
+} from 'antd'
+import Link from './external-link'
+import {
+  connectionHoppingWikiLink,
+  connectionHoppingWarnKey
+} from '../../common/constants'
+import * as ls from '../../common/safe-local-storage'
+
+const e = window.translate
+
+export default function ConnectionHoppingWarningText (props) {
+  function handleRead () {
+    ls.setItem(connectionHoppingWarnKey, 'yes')
+    props.closeWarn()
+  }
+  return (
+    <div className='pd1'>
+      <div className='pd1b'>
+        <span>{e('connectionHoppingWarning')}</span>
+      </div>
+      <div className='pd1b'>
+        <Link to={connectionHoppingWikiLink}>{connectionHoppingWikiLink}</Link>
+      </div>
+      <div className='pd1b'>
+        <Button
+          onClick={handleRead}
+          size='small'
+        >
+          {e('haveRead')}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/client/components/common/drag-handle.jsx

@@ -0,0 +1,60 @@
+import { useCallback, useRef, useState, memo } from 'react'
+import './drag-handle.styl'
+
+export default memo(function DragHandle (props) {
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStartRef = useRef(false)
+  const clientXRef = useRef(0)
+  const {
+    max,
+    min,
+    width,
+    left = true
+  } = props
+
+  const calc = useCallback((clientX) => {
+    let nw = left
+      ? clientX - clientXRef.current + width
+      : clientXRef.current - clientX + width
+    if (nw < min) {
+      nw = min
+    } else if (nw > max) {
+      nw = max
+    }
+    return nw
+  }, [props.max, props.min, props.left])
+
+  const handleMousedown = useCallback((e) => {
+    e.stopPropagation()
+    setIsDragging(true)
+    dragStartRef.current = true
+    clientXRef.current = e.clientX
+    window.addEventListener('mouseup', handleMouseup)
+    window.addEventListener('mousemove', handleMousemove)
+  }, [])
+
+  const handleMouseup = useCallback((e) => {
+    setIsDragging(false)
+    dragStartRef.current = false
+    const nw = calc(e.clientX)
+    props.onDragEnd(nw)
+    window.store.onResize()
+    window.removeEventListener('mouseup', handleMouseup)
+    window.removeEventListener('mousemove', handleMousemove)
+  }, [])
+
+  const handleMousemove = useCallback((e) => {
+    const nw = calc(e.clientX)
+    props.onDragMove(nw)
+  }, [width])
+  const divProps = {
+    className: 'drag-handle' + (isDragging ? ' dragging' : ''),
+    onMouseDown: handleMousedown,
+    draggable: false
+  }
+  return (
+    <div
+      {...divProps}
+    />
+  )
+})

package/client/components/common/drag-handle.styl

@@ -0,0 +1,12 @@
+
+.drag-handle
+  position absolute
+  right 0
+  top 0
+  width 3px
+  bottom 0
+  cursor ew-resize
+  display none
+  z-index 201
+  &.dragging
+    background #08c

package/client/components/context-menu/context-menu.styl

@@ -2,7 +2,7 @@
 .context-menu
   position: absolute
   width 280px
-  background main-dark
+  background main
   box-shadow 0px 0px 3px 3px alpha(main-dark, .35)
   padding 10px 0
   z-index 999
@@ -20,7 +20,7 @@
   line-height 28px
   padding 0 16px
   &:hover
-    background #000
+    background #08c
     color #eee
     cursor pointer
   &.disabled
@@ -47,7 +47,7 @@
   position absolute
   left 100%
   top 0
-  background main-dark
+  background main
   box-shadow 0px 0px 3px 3px alpha(main, .35)
   max-height 300px
   overflow-y scroll
@@ -62,8 +62,8 @@
   white-space nowrap
   text-overflow ellipsis
   &:hover, &.active
-    background-color primary
-    color contrastColor(primary)
+    background-color #08c
+    color #eee
 .bookmarks-sub-context-menu
   width 380px
   padding 20px 10px 10px 20px

package/client/components/context-menu/history.jsx

@@ -1,21 +1,12 @@
-import { createTitleWithTag } from '../../common/create-title'
+import HistoryItem from '../sidebar/history-item'
 
 export default function HistorySubMenu (props) {
-  const { store } = window
   return (
     <div className='sub-context-menu'>
       {
         props.history.map(item => {
-          const title = createTitleWithTag(item)
           return (
-            <div
-              className='sub-context-menu-item'
-              title={title}
-              key={item.id}
-              onClick={() => store.onSelectHistory(item.id)}
-            >
-              {title}
-            </div>
+            <HistoryItem key={item.id} item={item} />
           )
         })
       }

package/client/components/context-menu/sub-tab-menu.jsx

@@ -3,7 +3,7 @@ import { createTitleWithTag } from '../../common/create-title'
 
 export default class TabsSubMenuChild extends PureComponent {
   handleClick = () => {
-    window.store.onChangeTabId(this.props.item.id)
+    window.store.changeActiveTabId(this.props.item.id)
   }
 
   render () {

package/client/components/footer/footer-entry.jsx

@@ -18,12 +18,7 @@ const e = window.translate
 
 export default auto(function FooterEntry (props) {
   function handleInfoPanel () {
-    const { store } = window
-    store.rightPanelVisible = !store.rightPanelVisible
-    postMessage({
-      action: terminalActions.showInfoPanel,
-      activeTabId: store.activeTabId
-    })
+    window.store.openInfoPanel()
   }
 
   function batchInput (cmd, selectedTabIds) {

package/client/components/layout/layout-item.jsx

@@ -18,8 +18,8 @@ export default function LayoutItem (props) {
     }
     let currentElement = target
     while (currentElement) {
-      if (currentElement.classList && currentElement.classList.contains('tab')) {
-        return
+      if (currentElement.classList && currentElement.classList.contains('layout-item')) {
+        break
       }
       currentElement = currentElement.parentElement
     }

package/client/components/layout/layout.jsx

@@ -40,9 +40,10 @@ export default auto(function Layout (props) {
       rightPanelVisible,
       rightPanelPinned,
       rightPanelWidth,
-      resizeTrigger
+      resizeTrigger,
+      inActiveTerminal
     } = props.store
-    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
+    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
     const l = pinned ? 43 + leftSidebarWidth : 43
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {