@electerm/electerm-react 1.50.65 → 1.51.0

package/client/common/constants.js

@@ -43,7 +43,6 @@ export const maxSftpHistory = 20
 export const maxZoom = 8
 export const minZoom = 0.5
 export const extraTabWidth = 113
-// export const maxTabs = 20
 
 export const tabWidth = 160
 
@@ -252,18 +251,6 @@ export const fileActions = {
   renameAll: 'renameAll'
 }
 
-export const tabActions = {
-  updateTabsStatus: 'update-tabs-status',
-  setAllTabOffline: 'set-all-tab-offline',
-  changeCurrentTabId: 'changeCurrentTabId',
-  onDuplicateTab: 'on-duplicate-tab',
-  reloadTab: 'reload-tab',
-  initFirstTab: 'init-first-tab',
-  delTab: 'del-tab',
-  addTab: 'add-tab',
-  updateTabs: 'update-tabs'
-}
-
 export const commonActions = {
   returnTermLogState: 'return-term-log-state',
   getTermLogState: 'get-term-log-state',

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

@@ -0,0 +1,33 @@
+function expandShorthandColor (color) {
+  if (color.length === 4) {
+    return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
+  }
+  if (color.length === 7) {
+    return color
+  }
+  if (color.length < 7) {
+    return expandShorthandColor(color + 'f')
+  }
+  if (color.length > 7) {
+    return expandShorthandColor(color.slice(0, 7))
+  }
+  if (!/^#[A-Fa-f0-9]{6}$/.test(color)) {
+    return '#141314'
+  }
+}
+
+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)
+
+  // 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
+}

package/client/components/footer/batch-input.jsx

@@ -17,6 +17,7 @@ import {
 import TabSelect from './tab-select'
 import postMsg from '../../common/post-msg'
 import classNames from 'classnames'
+import deepCopy from 'json-deep-copy'
 
 const e = window.translate
 
@@ -178,11 +179,11 @@ export default class BatchInput extends Component {
 
   getTabs = () => {
     const { currentTabId } = this.props
-    return this.props.tabs.filter(tab => {
+    return deepCopy(this.props.tabs.filter(tab => {
       return tab.type !== terminalWebType &&
         tab.type !== terminalRdpType &&
         tab.type !== terminalVncType
-    }).sort((a, b) => {
+    })).sort((a, b) => {
       // Current tab goes first
       if (a.id === currentTabId) return -1
       if (b.id === currentTabId) return 1

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

@@ -1,8 +1,3 @@
-import {
-  tabActions
-} from '../../common/constants'
-import postMsg from '../../common/post-msg'
-
 export default function LayoutItem (props) {
   const {
     children,
@@ -10,16 +5,6 @@ export default function LayoutItem (props) {
     batch,
     ...itemProps
   } = props
-  function handleClick (e) {
-    let currentElement = e.target
-    while (currentElement) {
-      if (currentElement.classList && currentElement.classList.contains('tabs-dd-icon')) {
-        return false
-      }
-      currentElement = currentElement.parentElement
-    }
-    window.store.currentLayoutBatch = i
-  }
 
   function getDom () {
     return document.querySelector(`.layout-item.v${batch + 1}`)
@@ -38,9 +23,8 @@ export default function LayoutItem (props) {
       }
       currentElement = currentElement.parentElement
     }
-    // debug('target drop', target)
     const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
-    const onDropElem = getDom
+    const onDropElem = getDom()
     if (!onDropElem || !fromTab || fromTab.batch === batch) {
       return
     }
@@ -51,11 +35,6 @@ export default function LayoutItem (props) {
       return
     }
     t.batch = batch
-    postMsg({
-      action: tabActions.changeCurrentTabId,
-      currentTabId: store.currentTabId
-    })
-    store.setTabs(tabs)
     clearCls()
   }
 
@@ -82,7 +61,6 @@ export default function LayoutItem (props) {
   return (
     <div
       {...itemProps}
-      onClick={handleClick}
       onDragEnter={onDragEnter}
       onDragLeave={onDragLeave}
       onDragEnd={onDragEnd}

package/client/components/layout/layout.jsx

@@ -1,6 +1,6 @@
 import { auto } from 'manate/react'
 import Layouts from './layouts'
-import Sessions from '../session/sessions'
+import TabsWrap from '../tabs/index'
 import {
   splitConfig,
   quickCommandBoxHeight,
@@ -10,11 +10,20 @@ import layoutAlg from './layout-alg'
 import calcSessionSize from './session-size-alg'
 import TermSearch from '../terminal/term-search'
 import Footer from '../footer/footer-entry'
+import SessionsWrap from '../session/sessions'
 import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
+import pixed from './pixed'
+import copy from 'json-deep-copy'
 import { pick } from 'lodash-es'
 import './layout.styl'
 
 export default auto(function Layout (props) {
+  const { store } = props
+  const {
+    layout, config, currentTab
+  } = store
+  const conf = splitConfig[layout]
+
   const handleMousedown = (e) => {
 
   }
@@ -61,12 +70,22 @@ export default auto(function Layout (props) {
     const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0)
     return layoutAlg(layout, w, h)
   }
+  const layoutSize = calcLayoutStyle()
+  const {
+    width,
+    height
+  } = layoutSize
+  const pixedLayoutStyle = pixed(layoutSize)
+  const styles = buildLayoutStyles(conf, layout)
+  const layoutProps = {
+    layout,
+    ...styles,
+    layoutStyle: pixedLayoutStyle,
+    handleMousedown
+  }
+  const sizes = calcSessionSize(layout, width, height)
 
   function renderSessions (conf, layout) {
-    const {
-      width,
-      height
-    } = calcLayoutStyle()
     const {
       store
     } = props
@@ -79,10 +98,11 @@ export default auto(function Layout (props) {
       }
       tabsBatch[batch].push(tab)
     }
-    return calcSessionSize(layout, width, height).map((v, i) => {
+    return sizes.map((v, i) => {
       const sessProps = {
         batch: i,
         layout,
+        currentBatchTabId: store[`currentTabId${i}`],
         ...v,
         tabs: tabsBatch[i] || [],
         ...pick(store, [
@@ -91,7 +111,6 @@ export default auto(function Layout (props) {
           'resolutions',
           'hideDelKeyTip',
           'fileOperation',
-          'file',
           'pinnedQuickCommandBar',
           'tabsHeight',
           'appPath',
@@ -101,7 +120,7 @@ export default auto(function Layout (props) {
         ])
       }
       return (
-        <Sessions
+        <TabsWrap
           key={'sess' + i}
           {...sessProps}
         />
@@ -109,17 +128,6 @@ export default auto(function Layout (props) {
     })
   }
 
-  const { store } = props
-  const {
-    layout, config, currentTab
-  } = store
-  const conf = splitConfig[layout]
-  const layoutProps = {
-    layout,
-    ...buildLayoutStyles(conf, layout),
-    layoutStyle: calcLayoutStyle(),
-    handleMousedown
-  }
   const termProps = {
     currentTab,
     config,
@@ -146,10 +154,38 @@ export default auto(function Layout (props) {
     'openedSideBar',
     'currentQuickCommands'
   ])
+  const sessionsProps = {
+    styles: styles.wrapStyles,
+    sizes,
+    width,
+    height,
+    layoutStyle: pixedLayoutStyle,
+    ...pick(store, [
+      'currentTabId',
+      'currentTabId0',
+      'currentTabId1',
+      'currentTabId2',
+      'currentTabId3',
+      'batch',
+      'resolutions',
+      'hideDelKeyTip',
+      'fileOperation',
+      'file',
+      'pinnedQuickCommandBar',
+      'tabsHeight',
+      'appPath',
+      'leftSidebarWidth',
+      'pinned',
+      'openedSideBar',
+      'config'
+    ]),
+    tabs: copy(store.tabs)
+  }
   return [
     <Layouts {...layoutProps} key='layouts'>
       {renderSessions(conf, layout)}
     </Layouts>,
+    <SessionsWrap key='SessionsWrap' {...sessionsProps} />,
     <TermSearch
       key='TermSearch'
       {...termProps}

package/client/components/layout/layouts.jsx

@@ -3,16 +3,8 @@ import {
   splitConfig
 } from '../../common/constants'
 import LayoutItem from './layout-item'
+import pixed from './pixed'
 
-function pixed (style) {
-  return Object.keys(style).reduce((prev, k) => {
-    const v = style[k]
-    return {
-      ...prev,
-      [k]: isNaN(v) ? v : v + 'px'
-    }
-  }, {})
-}
 export default memo(function LayoutWrap (props) {
   const {
     children,
@@ -28,7 +20,7 @@ export default memo(function LayoutWrap (props) {
   } = splitConfig[layout]
   const wrapStyle = {
     className: 'layout-wrap layout-wrap-' + layout,
-    style: pixed(layoutStyle)
+    style: layoutStyle
   }
   return (
     <div {...wrapStyle}>

package/client/components/layout/pixed.js

@@ -0,0 +1,9 @@
+export default function pixed (style) {
+  return Object.keys(style).reduce((prev, k) => {
+    const v = style[k]
+    return {
+      ...prev,
+      [k]: isNaN(v) ? v : v + 'px'
+    }
+  }, {})
+}

package/client/components/main/css-overwrite.jsx

@@ -41,7 +41,7 @@ export default class CssOverwrite extends PureComponent {
       st = `url(${terminalBackgroundImagePath}) !important`
     }
     if (!st) {
-      return `#container .session-current .xterm-viewport {
+      return `#container .session-batch-active .xterm-screen {
         background-image: url("./images/electerm-watermark.png");
       }`
     }
@@ -65,7 +65,7 @@ export default class CssOverwrite extends PureComponent {
       })`)
     }
 
-    return `#container .session-current .xterm-viewport {
+    return `#container .session-batch-active .xterm-screen {
       ${styles.join(';')} 
     }`
   }

package/client/components/quick-commands/quick-commands-select.jsx

@@ -29,7 +29,7 @@ export default class QuickCommandsFooter extends PureComponent {
   render () {
     return (
       <div
-        className='fleft relative'
+        className='fleft relative quick-command-trigger-wrap'
         onMouseEnter={this.handleOpen}
         onMouseLeave={this.handleMouseLeave}
       >

package/client/components/session/session.jsx

@@ -6,6 +6,7 @@ import Term from '../terminal'
 import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
 import VncSession from '../vnc/vnc-session'
+import WebSession from '../web/web-session.jsx'
 import {
   SearchOutlined,
   FullscreenOutlined,
@@ -24,7 +25,8 @@ import {
   terminalActions,
   connectionMap,
   terminalRdpType,
-  terminalVncType
+  terminalVncType,
+  terminalWebType
 } from '../../common/constants'
 import safeName from '../../common/safe-name'
 import postMessage from '../../common/post-msg'
@@ -55,6 +57,53 @@ export default class SessionWrapper extends Component {
     clearTimeout(this.backspaceKeyPressedTimer)
   }
 
+  getDom = () => {
+    return document.getElementById(`is-${this.props.tab.id}`)
+  }
+
+  onDrop = (e) => {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    const onDropElem = this.getDom()
+    const { batch } = this.props.tab
+    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
+    this.clearCls()
+  }
+
+  clearCls = () => {
+    this.getDom()?.classList.remove('drag-over')
+  }
+
+  addCls = () => {
+    this.getDom()?.classList.add('drag-over')
+  }
+
+  onDragEnter = () => {
+    this.addCls()
+  }
+
+  onDragLeave = (e) => {
+    this.clearCls()
+  }
+
+  onDragEnd = (e) => {
+    this.clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
+
   onDelKeyPressed = () => {
     this.setState({
       delKeyPressed: true
@@ -120,11 +169,7 @@ export default class SessionWrapper extends Component {
   }
 
   computePosition = (index) => {
-    const windowWidth = this.getWidth()
-    const heightAll = this.props.computeHeight()
     return {
-      height: heightAll,
-      width: windowWidth,
       left: 0,
       top: 0
     }
@@ -144,9 +189,26 @@ export default class SessionWrapper extends Component {
       sessionId,
       sftpPathFollowSsh
     } = this.state
+    const {
+      tab
+    } = this.props
     const {
       pane, type
-    } = this.props.tab
+    } = tab
+    if (type === terminalWebType) {
+      const webProps = {
+        tab,
+        width: this.props.width,
+        height: this.props.height,
+        reloadTab: this.props.reloadTab,
+        currentBatchTabId: this.props.currentBatchTabId
+      }
+      return (
+        <WebSession
+          {...webProps}
+        />
+      )
+    }
     if (type === terminalRdpType || type === terminalVncType) {
       const rdpProps = {
         tab: this.props.tab,
@@ -186,9 +248,10 @@ export default class SessionWrapper extends Component {
     const cls = pane === paneMap.terminal
       ? 'terms-box'
       : 'terms-box hide'
-    const height = this.props.computeHeight()
-    const { tab } = this.props
     const width = this.getWidth()
+    const height = this.props.computeHeight(
+      this.props.height
+    )
     const themeConfig = copy(window.store.getThemeConfig())
     const logName = safeName(`${tab.title ? tab.title + '_' : ''}${tab.host ? tab.host + '_' : ''}${tab.id}`)
     const pops = {
@@ -203,7 +266,9 @@ export default class SessionWrapper extends Component {
           'setCwd',
           'onDelKeyPressed'
         ]),
-      ...this.computePosition()
+      ...this.computePosition(),
+      width,
+      height
     }
     return (
       <div
@@ -214,7 +279,6 @@ export default class SessionWrapper extends Component {
         }}
       >
         <Term
-          key={tab.id}
           logName={logName}
           sessionId={sessionId}
           sessionOptions={sessionOptions}
@@ -233,10 +297,16 @@ export default class SessionWrapper extends Component {
       cwd
     } = this.state
     const { pane, type, id } = this.props.tab
-    if (type === terminalRdpType) {
+    if (
+      type === terminalRdpType ||
+      type === terminalVncType ||
+      type === terminalWebType
+    ) {
       return null
     }
-    const height = this.props.computeHeight(pane)
+    const height = this.props.computeHeight(
+      this.props.height
+    )
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''
@@ -328,12 +398,17 @@ export default class SessionWrapper extends Component {
   renderControl = () => {
     const { sftpPathFollowSsh } = this.state
     const { props } = this
-    const { pane, enableSsh, type } = props.tab
-    if (type === terminalRdpType || type === terminalVncType) {
+    const { tab } = props
+    const { pane, enableSsh, type } = tab
+    if (
+      type === terminalRdpType ||
+      type === terminalVncType ||
+      type === terminalWebType
+    ) {
       return null
     }
-    const termType = props.tab?.type
-    const isSsh = props.tab.authType
+    const termType = tab?.type
+    const isSsh = tab.authType
     const isLocal = !isSsh && (termType === connectionMap.local || !termType)
     const types = [
       paneMap.terminal,
@@ -410,14 +485,10 @@ export default class SessionWrapper extends Component {
   }
 
   render () {
-    const {
-      splitDirection
-    } = this.state
     const { pane, id } = this.props.tab
     const cls = classnames(
       'term-sftp-box',
       pane,
-      splitDirection,
       {
         'is-transporting': this.props.tab.isTransporting
       },
@@ -425,10 +496,17 @@ export default class SessionWrapper extends Component {
         'disable-ssh': this.props.tab.enableSsh === false
       }
     )
+    const divProps = {
+      className: cls,
+      id: `is-${id}`,
+      onDragEnter: this.onDragEnter,
+      onDragLeave: this.onDragLeave,
+      onDrop: this.onDrop,
+      onDragEnd: this.onDragEnd
+    }
     return (
       <div
-        className={cls}
-        id={`is-${id}`}
+        {...divProps}
       >
         {this.renderControl()}
         {this.renderTerminals()}

package/client/components/session/session.styl

@@ -48,14 +48,18 @@
   &:hover
     color text-light
 
+.sessions
+  position absolute
+  background main
 .session-wrap
   display none
-.session-current
+  position absolute
+  overflow hidden
+  z-index 3
+  padding-top 36px
+.session-batch-active
   display block
-.no-sessions
-  background main-dark
-  text-align center
-  padding 50px 0
+
 .web-session-wrap
   height 100vh
   background main