@electerm/electerm-react 1.50.21 → 1.50.31

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

@@ -1,7 +1,13 @@
+import {
+  tabActions
+} from '../../common/constants'
+import postMsg from '../../common/post-msg'
+
 export default function LayoutItem (props) {
   const {
     children,
     i,
+    batch,
     ...itemProps
   } = props
   function handleClick (e) {
@@ -12,13 +18,75 @@ export default function LayoutItem (props) {
       }
       currentElement = currentElement.parentElement
     }
+    window.store.currentLayoutBatch = i
+  }
+
+  function getDom () {
+    return document.querySelector(`.layout-item.v${batch + 1}`)
+  }
+
+  function onDrop (e) {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    let currentElement = target
+    while (currentElement) {
+      if (currentElement.classList && currentElement.classList.contains('tab')) {
+        return
+      }
+      currentElement = currentElement.parentElement
+    }
+    // debug('target drop', target)
+    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    const onDropElem = getDom
+    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
+    postMsg({
+      action: tabActions.changeCurrentTabId,
+      currentTabId: store.currentTabId
+    })
+    store.setTabs(tabs)
+    clearCls()
+  }
+
+  function clearCls () {
+    getDom()?.classList.remove('drag-over')
+  }
+
+  function addCls () {
+    getDom()?.classList.add('drag-over')
+  }
+
+  function onDragEnter () {
+    addCls()
+  }
+
+  function onDragLeave (e) {
+    clearCls()
+  }
 
-    window.StorageEvent.currentLayoutBatch = i
+  function onDragEnd (e) {
+    clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
   }
   return (
     <div
       {...itemProps}
       onClick={handleClick}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragEnd={onDragEnd}
+      onDrop={onDrop}
     >
       {children}
     </div>

package/client/components/layout/layout.jsx

@@ -84,7 +84,7 @@ export default auto(function Layout (props) {
         batch: i,
         layout,
         ...v,
-        tabs: tabsBatch[i],
+        tabs: tabsBatch[i] || [],
         ...pick(store, [
           'isMaximized',
           'config',

package/client/components/layout/layout.styl

@@ -2,4 +2,7 @@
 .layout-wrap
 .layout-item
   position absolute
-  background main
+  background main
+  overflow hidden
+  &.drag-over
+    border 2px solid #08c

package/client/components/layout/layouts.jsx

@@ -37,7 +37,8 @@ export default memo(function LayoutWrap (props) {
           const itemProps = {
             i,
             style: pixed(wrapStyles[i]),
-            className: 'layout-item v' + (i + 1)
+            className: 'layout-item v' + (i + 1),
+            batch: i
           }
           return (
             <LayoutItem

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

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'custom-css'

package/client/components/main/main.jsx

@@ -64,7 +64,7 @@ export default auto(function Index (props) {
     if (window.et.isWebApp) {
       window.onbeforeunload = store.beforeExit
     }
-    store.isSencondInstance = window.pre.runSync('isSencondInstance')
+    store.isSecondInstance = window.pre.runSync('isSecondInstance')
     store.initData()
     store.checkForDbUpgrade()
     window.pre.runGlobalAsync('registerDeepLink')
@@ -76,7 +76,7 @@ export default auto(function Index (props) {
     config,
     terminalFullScreen,
     pinned,
-    isSencondInstance,
+    isSecondInstance,
     pinnedQuickCommandBar,
     wsInited,
     upgradeInfo,
@@ -98,7 +98,7 @@ export default auto(function Index (props) {
     pinned,
     'qm-pinned': pinnedQuickCommandBar,
     'term-fullscreen': terminalFullScreen,
-    'is-main': !isSencondInstance
+    'is-main': !isSecondInstance
   })
   const ext1 = {
     className: cls

package/client/components/main/ui-theme.jsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'theme-css'

package/client/components/session/session.jsx

@@ -20,7 +20,6 @@ import generate from '../../common/uid'
 import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
-  termControlHeight,
   paneMap,
   terminalActions,
   connectionMap,
@@ -89,15 +88,6 @@ export default class SessionWrapper extends Component {
     })
   }
 
-  computeHeight = () => {
-    const {
-      tabsHeight
-    } = this.props
-    return this.props.height -
-      tabsHeight -
-      termControlHeight
-  }
-
   editTab = (up) => {
     const {
       tab,
@@ -131,7 +121,7 @@ export default class SessionWrapper extends Component {
 
   computePosition = (index) => {
     const windowWidth = this.getWidth()
-    const heightAll = this.computeHeight()
+    const heightAll = this.props.computeHeight()
     return {
       height: heightAll,
       width: windowWidth,
@@ -196,7 +186,7 @@ export default class SessionWrapper extends Component {
     const cls = pane === paneMap.terminal
       ? 'terms-box'
       : 'terms-box hide'
-    const height = this.computeHeight()
+    const height = this.props.computeHeight()
     const { tab } = this.props
     const width = this.getWidth()
     const themeConfig = copy(window.store.getThemeConfig())
@@ -246,7 +236,7 @@ export default class SessionWrapper extends Component {
     if (type === terminalRdpType) {
       return null
     }
-    const height = this.computeHeight(pane)
+    const height = this.props.computeHeight(pane)
     const cls = pane === paneMap.terminal
       ? 'hide'
       : ''

package/client/components/session/sessions.jsx

@@ -8,15 +8,13 @@ import copy from 'json-deep-copy'
 import wait from '../../common/wait.js'
 import Tabs from '../tabs/index.jsx'
 import {
-  commonActions,
   tabActions,
   paneMap,
   statusMap,
-  terminalWebType
+  terminalWebType,
+  termControlHeight
 } from '../../common/constants.js'
 import newTerm, { updateCount } from '../../common/new-terminal.js'
-import postMsg from '../../common/post-msg.js'
-
 import LogoElem from '../common/logo-elem.jsx'
 import { Button } from 'antd'
 import toSimpleObj from '../../common/to-simple-obj.js'
@@ -45,9 +43,7 @@ class Sessions extends Component {
       this.props.tabs &&
       !deepEqual(prevProps.tabs, this.props.tabs)
     ) {
-      this.setState({
-        tabs: copy(this.props.tabs)
-      })
+      this.updateTabs(this.props.tabs)
     }
   }
 
@@ -58,11 +54,29 @@ class Sessions extends Component {
     this.timer = null
   }
 
+  updateTabs = (propTabs) => {
+    const update = {
+      tabs: copy(propTabs)
+    }
+    const currentTab = propTabs.find(t => t.id === this.state.currentTabId)
+    if (!currentTab) {
+      update.currentTabId = propTabs[0]?.id
+    }
+    this.setState(update)
+  }
+
   initShortcuts () {
     window.addEventListener('keydown', this.bindHandleKeyboardEvent)
   }
 
+  notCurrentTab = (tab) => {
+    return this.state.currentTabId !== window.store.currentTabId
+  }
+
   closeCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.delTab(
       this.state.currentTabId
@@ -70,12 +84,23 @@ class Sessions extends Component {
   }
 
   reloadCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.reloadTab(
       this.getCurrentTab()
     )
   }
 
+  cloneToNextLayoutShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
+    e.stopPropagation()
+    window.store.cloneToNextLayout()
+  }
+
   watch = () => {
     window.addEventListener('message', this.onEvent)
   }
@@ -94,18 +119,8 @@ class Sessions extends Component {
         currentTabId: id
       })
     } else {
-      window.store.focus()
+      document.querySelector('.tab.active').click()
     }
-    postMsg({
-      action: commonActions.updateStore,
-      value: id,
-      prop: 'currentTabId'
-    })
-    postMsg({
-      action: commonActions.updateStore,
-      value: id,
-      prop: 'currentTabId' + this.props.batch
-    })
   }
 
   getCurrentTab = () => {
@@ -185,6 +200,10 @@ class Sessions extends Component {
     this.addTab(tab)
   }
 
+  handleClick = () => {
+    window.store.currentTabId = this.state.currentTabId
+  }
+
   reloadTab = async (tabToReload) => {
     this.setState(async oldState => {
       const tab = copy(
@@ -347,6 +366,15 @@ class Sessions extends Component {
     )
   }
 
+  computeHeight = () => {
+    const {
+      tabsHeight
+    } = this.props
+    return this.props.height -
+      tabsHeight -
+      termControlHeight
+  }
+
   renderSessions () {
     const {
       config, width, height
@@ -389,6 +417,7 @@ class Sessions extends Component {
           'onChangeTabId',
           'onDuplicateTab',
           'reloadTab',
+          'computeHeight',
           'delTab',
           'addTab',
           'editTab'
@@ -396,7 +425,12 @@ class Sessions extends Component {
       }
       if (type === terminalWebType) {
         const webProps = {
-          tab
+          tab,
+          width,
+          height: this.computeHeight(),
+          ...pick(this, [
+            'reloadTab'
+          ])
         }
         return (
           <div className={cls} key={id}>
@@ -461,6 +495,7 @@ class Sessions extends Component {
       <div
         className='sessions'
         key='main-sess'
+        onClick={this.handleClick}
       >
         {this.renderSessions()}
       </div>

package/client/components/setting-sync/setting-sync-form.jsx

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, notification, Form } from 'antd'
 import Link from '../common/external-link'

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

@@ -10,6 +10,11 @@ export default () => {
       shortcut: 'alt+r',
       shortcutMac: 'alt+r'
     },
+    {
+      name: 'app_cloneToNextLayout',
+      shortcut: 'ctrl+/',
+      shortcutMac: 'meta+/'
+    },
     {
       name: 'app_newBookmark',
       shortcut: 'ctrl+n',
@@ -40,11 +45,6 @@ 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/tabs/tab.jsx

@@ -9,7 +9,6 @@ import {
   Loading3QuartersOutlined,
   BorderlessTableOutlined
 } from '@ant-design/icons'
-import generate from '../../common/id-with-stamp'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
@@ -18,10 +17,7 @@ import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import {
-  terminalSshConfigType,
-  splitConfig,
-  paneMap,
-  statusMap
+  terminalSshConfigType
 } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
@@ -203,18 +199,7 @@ class Tab extends Component {
   }
 
   cloneToNextLayout = () => {
-    const defaultStatus = statusMap.processing
-    const { batch, layout } = this.props
-    const ntb = copy(this.state.tab)
-    Object.assign(ntb, {
-      id: generate(),
-      status: defaultStatus,
-      isTransporting: undefined,
-      pane: paneMap.terminal
-    })
-    const maxBatch = splitConfig[layout].children
-    ntb.batch = (batch + 1) % maxBatch
-    window.store.addTab(ntb)
+    window.store.cloneToNextLayout()
   }
 
   newTab = () => {
@@ -280,17 +265,20 @@ class Tab extends Component {
   }
 
   renderContext = () => {
-    const { tabs, tab, layout } = this.props
+    const { tabs, tab } = this.props
     const len = tabs.length
     const index = findIndex(tabs, t => t.id === tab.id)
     const noRight = index >= len - 1
     const isSshConfig = tab.type === terminalSshConfigType
     const res = []
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
+    const closeShortcut = this.getShortcut('app_closeCurrentTab')
+    const cloneToNextShortcut = this.getShortcut('app_cloneToNextLayout')
     res.push({
       func: 'handleClose',
       icon: 'CloseOutlined',
-      text: e('close')
+      text: e('close'),
+      subText: closeShortcut
     })
     res.push({
       func: 'closeOther',
@@ -314,13 +302,12 @@ class Tab extends Component {
       icon: 'CopyOutlined',
       text: e('duplicate')
     })
-    if (layout !== 'c1') {
-      res.push({
-        func: 'cloneToNextLayout',
-        icon: 'CopyOutlined',
-        text: e('cloneToNextLayout')
-      })
-    }
+    res.push({
+      func: 'cloneToNextLayout',
+      icon: 'CopyOutlined',
+      text: e('cloneToNextLayout'),
+      subText: cloneToNextShortcut
+    })
     res.push({
       disabled: isSshConfig,
       func: 'doRename',

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'
@@ -1237,6 +1237,7 @@ clear\r`
       new KeywordHighlighterAddon(keywords)
     )
     window.store.triggerResize()
+    window.store.focus()
   }
 
   onResize = throttle(() => {

package/client/components/web/address-bar.jsx

@@ -0,0 +1,50 @@
+import {
+  Input,
+  Tooltip
+} from 'antd'
+import { copy } from '../../common/clipboard'
+import {
+  ReloadOutlined,
+  GlobalOutlined
+} from '@ant-design/icons'
+
+export default function AddressBar (props) {
+  const {
+    url,
+    onReload,
+    onOpen,
+    title,
+    description
+  } = props
+  const content = (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  )
+  function handleClick () {
+    copy(url)
+  }
+  return (
+    <div className='web-address-bar pd1'>
+      <Tooltip
+        title={content}
+      >
+        <Input
+          value={url}
+          onClick={handleClick}
+          addonBefore={
+            <ReloadOutlined
+              onClick={onReload}
+            />
+          }
+          addonAfter={
+            <GlobalOutlined
+              onClick={onOpen}
+            />
+          }
+        />
+      </Tooltip>
+    </div>
+  )
+}

package/client/components/web/web-session.jsx

@@ -1,19 +1,41 @@
-import { useEffect } from 'react'
-import Link from '../common/external-link'
+import AddressBar from './address-bar'
 
 export default function WebSession (props) {
   const {
-    tab
+    tab,
+    width,
+    height,
+    reloadTab
   } = props
-  useEffect(() => {
-    tab.url && window.openLink(tab.url)
-  }, [])
+  const addrProps = {
+    url: tab.url,
+    title: tab.title,
+    description: tab.description,
+    onOpen: () => {
+      window.openLink(tab.url)
+    },
+    onReload: () => {
+      reloadTab(
+        tab
+      )
+    }
+  }
+  const viewProps = {
+    src: tab.url,
+    style: {
+      width: (width - 10) + 'px',
+      height: (height - 12) + 'px'
+    },
+    disableblinkfeatures: 'true',
+    disablewebsecurity: 'true'
+  }
   return (
     <div className='web-session-wrap'>
-      <div className='pd3 aligncenter'>
-        <h1>{tab.title}</h1>
-        <p>{tab.description}</p>
-        <Link to={tab.url}>{tab.url}</Link>
+      <AddressBar {...addrProps} />
+      <div className='pd1'>
+        <webview
+          {...viewProps}
+        />
       </div>
     </div>
   )

package/client/entry/index.jsx

@@ -1,6 +1,6 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import 'antd/dist/reset.css'
-import 'xterm/css/xterm.css'
+import '@xterm/xterm/css/xterm.css'
 import '../common/trzsz'
 import 'firacode/distr/fira_code.css'
 import Main from '../components/main/index.jsx'
@@ -9,8 +9,7 @@ notification.config({
   placement: 'bottomRight'
 })
 
-const rootElement = document.getElementById('container')
-render(
-  <Main />,
-  rootElement
+const rootElement = createRoot(document.getElementById('container'))
+rootElement.render(
+  <Main />
 )

package/client/store/db-upgrade.js

@@ -9,7 +9,7 @@ import initWatch from './watch'
 export default (Store) => {
   Store.prototype.checkForDbUpgrade = async function () {
     const { store } = window
-    if (store.isSencondInstance) {
+    if (store.isSecondInstance) {
       return false
     }
     const shouldUpgrade = await window.pre.runGlobalAsync('checkDbUpgrade')

package/client/store/quick-command.js

@@ -73,7 +73,7 @@ export default Store => {
         clickCount: ((qm.clickCount || 0) + 1)
       })
     }
-  }, 100)
+  }, 200)
 
   Store.prototype.setQmSortByFrequency = function (v) {
     window.store.qmSortByFrequency = v

package/client/store/setting.js

@@ -190,7 +190,7 @@ export default Store => {
 
   Store.prototype.openSettingModal = function () {
     const { store } = window
-    if (store.isSencondInstance) {
+    if (store.isSecondInstance) {
       return message.warning(
         e('sencondInstanceTip')
       )

package/client/store/tab.js

@@ -5,11 +5,14 @@
 import { uniq, debounce, findIndex } from 'lodash-es'
 import {
   tabActions,
-  splitConfig
+  splitConfig,
+  statusMap,
+  paneMap
 } from '../common/constants'
 import postMsg from '../common/post-msg'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
+import generate from '../common/id-with-stamp'
 
 export default Store => {
   Store.prototype.updateTabsStatus = function () {
@@ -63,7 +66,7 @@ export default Store => {
     postMsg({
       action: tabActions.addTab,
       tab,
-      batch: window.openTabBatch ?? window.store.currentLayoutBatch,
+      batch: tab?.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch,
       index
     })
   }
@@ -96,6 +99,28 @@ export default Store => {
     }
   }
 
+  Store.prototype.cloneToNextLayout = function () {
+    const { store } = window
+    const defaultStatus = statusMap.processing
+    const { currentTab, layout, currentLayoutBatch } = store
+    const ntb = deepCopy(currentTab)
+    Object.assign(ntb, {
+      id: generate(),
+      status: defaultStatus,
+      isTransporting: undefined,
+      pane: paneMap.terminal
+    })
+    let maxBatch = splitConfig[layout].children
+    if (maxBatch < 2) {
+      maxBatch = 2
+    }
+    ntb.batch = (currentLayoutBatch + 1) % maxBatch
+    store.addTab(ntb)
+    if (layout === 'c1') {
+      store.setLayout('c2')
+    }
+  }
+
   Store.prototype.setLayout = function (layout) {
     const {
       store

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.50.21",
+  "version": "1.50.31",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",