@electerm/electerm-react 1.40.18 → 1.50.21

package/client/store/init-state.js

@@ -19,7 +19,8 @@ import {
   rightSidebarWidthKey,
   dismissDelKeyTipLsKey,
   qmSortByFrequencyKey,
-  resolutionsLsKey
+  resolutionsLsKey,
+  splitMap
 } from '../common/constants'
 import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
@@ -38,6 +39,7 @@ function getDefaultBookmarkGroups (bookmarks) {
 }
 
 export default () => {
+  const layout = ls.getItem('layout') || splitMap.c1
   return {
     // common
     wsInited: false,
@@ -46,7 +48,6 @@ export default () => {
     lastDataUpdateTime: 0,
     _tabs: '[]',
     currentTabId: '',
-    termFocused: false,
     _history: '[]',
     _bookmarks: '[]',
     _profiles: '[]',
@@ -90,6 +91,18 @@ export default () => {
         direction: 'desc'
       }
     }),
+    layout,
+    prevLayout: layout,
+    resizeTrigger: 0,
+    currentLayoutBatch: 0,
+    currentTabId0: '',
+    currentTabId1: '',
+    currentTabId2: '',
+    currentTabId3: '',
+    _terminalInfoProps: '{}',
+    rightPanelVisible: false,
+    rightPanelPinned: false,
+    rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
 
     // for settings related
     _setting: '',
@@ -98,7 +111,6 @@ export default () => {
     autofocustrigger: Date.now(),
     bookmarkId: undefined,
     showModal: 0,
-    activeTerminalId: '',
 
     // setting sync related
     isSyncingSetting: false,

package/client/store/load-data.js

@@ -6,7 +6,7 @@ import { dbNames, update, getData, fetchInitData, insert, remove } from '../comm
 import parseInt10 from '../common/parse-int10'
 import { infoTabs, statusMap, defaultEnvLang } from '../common/constants'
 import fs from '../common/fs'
-import generate from '../common/uid'
+import generate from '../common/id-with-stamp'
 import defaultSettings from '../common/default-setting'
 import encodes from '../components/bookmark-form/encodes'
 import runIdle from '../common/run-idle'

package/client/store/quick-command.js

@@ -12,6 +12,7 @@ import delay from '../common/wait'
 import generate from '../common/uid'
 import postMessage from '../common/post-msg'
 import * as ls from '../common/safe-local-storage'
+import { debounce } from 'lodash-es'
 
 export default Store => {
   Store.prototype.setQuickCommands = function (list) {
@@ -33,16 +34,15 @@ export default Store => {
   }
 
   Store.prototype.runQuickCommand = function (cmd, inputOnly = false) {
-    const { activeTerminalId } = window.store
     postMessage({
       action: terminalActions.quickCommand,
       cmd,
       inputOnly,
-      activeSplitId: activeTerminalId
+      currentTabId: window.store.currentTabId
     })
   }
 
-  Store.prototype.runQuickCommandItem = async (id) => {
+  Store.prototype.runQuickCommandItem = debounce(async (id) => {
     const {
       store
     } = window
@@ -73,7 +73,7 @@ export default Store => {
         clickCount: ((qm.clickCount || 0) + 1)
       })
     }
-  }
+  }, 100)
 
   Store.prototype.setQmSortByFrequency = function (v) {
     window.store.qmSortByFrequency = v

package/client/store/session.js

@@ -11,7 +11,7 @@ export default Store => {
     postMsg({
       action: terminalActions.zoom,
       zoomValue: delta > 0 ? 1 : -1,
-      activeSplitId: window.store.activeTerminalId
+      currentTabId: window.store.currentTabId
     })
   }, 500)
 }

package/client/store/setting.js

@@ -79,8 +79,10 @@ export default Store => {
       ...copy(item),
       from: 'history',
       srcId: item.id,
-      ...newTerm(true, true)
+      ...newTerm(true, true),
+      batch: window.openTabBatch ?? store.currentLayoutBatch
     })
+    delete window.openTabBatch
   }
 
   Store.prototype.onSelectBookmark = function (id) {
@@ -94,14 +96,16 @@ export default Store => {
     if (!item) {
       return
     }
-
     store.addTab({
       ...item,
       from: 'bookmarks',
       srcId: item.id,
-      ...newTerm(true, true)
+      ...newTerm(true, true),
+      batch: window.openTabBatch ?? store.currentLayoutBatch
     })
 
+    delete window.openTabBatch
+
     if (store.config.disableSshHistory) {
       return
     }
@@ -117,8 +121,8 @@ export default Store => {
     } else {
       const historyItem = {
         ...item,
-        id: generate(), // History item gets a unique id
-        bookmarkId, // Store original bookmark id for future matching
+        id: generate(),
+        bookmarkId,
         count: 1,
         lastUse: Date.now()
       }

package/client/store/sync.js

@@ -161,6 +161,14 @@ export default (Store) => {
     const { store } = window
     store.isSyncingSetting = true
     store.isSyncUpload = true
+    await store.uploadSettingAction(type).catch(store.onError)
+    store.isSyncingSetting = false
+    store.isSyncUpload = false
+    window[type + 'IsSyncing'] = false
+  }
+
+  Store.prototype.uploadSettingAction = async function (type) {
+    const { store } = window
     const token = store.getSyncToken(type)
     let gistId = store.getSyncGistId(type)
     if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
@@ -168,9 +176,6 @@ export default (Store) => {
       gistId = store.getSyncGistId(type)
     }
     if (!gistId && type !== syncTypes.custom && type !== syncTypes.cloud) {
-      window.isSyncing = false
-      store.isSyncingSetting = false
-      store.isSyncUpload = false
       return
     }
     const pass = store.getSyncPassword(type)
@@ -218,10 +223,7 @@ export default (Store) => {
           })
         }
       }
-    }], token, store.getProxySetting()).catch(store.onError)
-    store.isSyncingSetting = false
-    store.isSyncUpload = false
-    window[type + 'IsSyncing'] = false
+    }], token, store.getProxySetting())
     if (res) {
       store.updateSyncSetting({
         [type + 'LastSyncTime']: Date.now()
@@ -233,6 +235,13 @@ export default (Store) => {
     const { store } = window
     store.isSyncingSetting = true
     store.isSyncDownload = true
+    await store.downloadSettingAction(type).catch(store.onError)
+    store.isSyncingSetting = false
+    store.isSyncDownload = false
+  }
+
+  Store.prototype.downloadSettingAction = async function (type) {
+    const { store } = window
     const token = store.getSyncToken(type)
     let gistId = store.getSyncGistId(type)
     if (!gistId && type !== syncTypes.cloud && type !== syncTypes.custom) {
@@ -256,8 +265,6 @@ export default (Store) => {
       let str = get(gist, `files["${n}.json"].content`)
       if (!str) {
         if (n === settingMap.bookmarks) {
-          store.isSyncingSetting = false
-          store.isSyncDownload = false
           throw new Error(('Seems you have a empty gist, you can try use existing gist ID or upload first'))
         } else {
           continue

package/client/store/system-menu.js

@@ -3,7 +3,7 @@
  */
 
 import { Modal } from 'antd'
-import { isFunction, isString } from 'lodash-es'
+import { isString } from 'lodash-es'
 import getInitItem from '../common/init-setting-item'
 import {
   settingMap,
@@ -44,15 +44,6 @@ export default Store => {
     window.store.zoom()
   }
 
-  Store.prototype.onCloseAbout = function (cb) {
-    const { store } = window
-    store.showInfoModal = false
-    if (isFunction(cb)) {
-      cb()
-    }
-    store.focus()
-  }
-
   Store.prototype.openAbout = function (tab) {
     const { store } = window
     store.showInfoModal = true

package/client/store/tab.js

@@ -4,9 +4,12 @@
 
 import { uniq, debounce, findIndex } from 'lodash-es'
 import {
-  tabActions
+  tabActions,
+  splitConfig
 } from '../common/constants'
 import postMsg from '../common/post-msg'
+import * as ls from '../common/safe-local-storage'
+import deepCopy from 'json-deep-copy'
 
 export default Store => {
   Store.prototype.updateTabsStatus = function () {
@@ -19,6 +22,22 @@ export default Store => {
     })
   }
 
+  Store.prototype.updateStoreTabs = function (tabs0, batch0) {
+    if (!tabs0.length && batch0 !== undefined) {
+      const tabs = window.store.getTabs().filter(t => t.batch !== batch0)
+      window.store.setTabs(tabs)
+      return true
+    }
+    if (!tabs0.length) {
+      return false
+    }
+    const { batch } = tabs0[0]
+    const tabs = window.store.getTabs()
+      .filter(t => t.batch !== batch)
+      .concat(deepCopy(tabs0))
+    window.store.setTabs(tabs)
+  }
+
   Store.prototype.getTabs = function () {
     return window.store.getItems('tabs')
   }
@@ -27,6 +46,10 @@ export default Store => {
     return window.store.setItems('tabs', list)
   }
 
+  Store.prototype.delTab = function (id) {
+    return window.store.delItem({ id }, 'tabs')
+  }
+
   Store.prototype.initFirstTab = function () {
     postMsg({
       action: tabActions.initFirstTab
@@ -40,6 +63,7 @@ export default Store => {
     postMsg({
       action: tabActions.addTab,
       tab,
+      batch: window.openTabBatch ?? window.store.currentLayoutBatch,
       index
     })
   }
@@ -71,4 +95,45 @@ export default Store => {
       }
     }
   }
+
+  Store.prototype.setLayout = function (layout) {
+    const {
+      store
+    } = window
+    const prevLayout = store.layout
+    if (prevLayout === layout) {
+      return
+    }
+    store.prevLayout = prevLayout
+    ls.setItem('layout', layout)
+    store.layout = layout
+    const len = splitConfig[layout].children
+    const prevLen = prevLayout ? splitConfig[prevLayout].children : 0
+    if (len < prevLen) {
+      const {
+        tabs
+      } = store
+      // Update tabs where batch > len - 1
+      const updatedTabs = tabs.map(tab => {
+        if (tab.batch > len - 1) {
+          return { ...tab, batch: len - 1 }
+        }
+        return tab
+      })
+      // Set the updated tabs back to the store
+      store.setTabs(updatedTabs)
+      setTimeout(
+        () => {
+          postMsg({
+            action: tabActions.changeCurrentTabId,
+            currentTabId: store.currentTabId
+          })
+        },
+        1000
+      )
+      if (store.currentLayoutBatch > len - 1) {
+        store.currentLayoutBatch = len - 1
+      }
+    }
+  }
 }

package/client/store/transfer-list.js

@@ -48,7 +48,7 @@ export default Store => {
     return window.store.addItems(objs, 'fileTransfers')
   }
   Store.prototype.setFileTransfers = function (objs) {
-    return window.store.setState('fileTransfers', objs)
+    return window.store.setState('fileTransfers', objs.filter(d => !d.cancel))
   }
   Store.prototype.addTransferList = function (objs) {
     const { store } = window
@@ -85,11 +85,10 @@ export default Store => {
     }))
   }
   Store.prototype.cancelAll = function () {
-    const { store } = window
-    store.setFileTransfers(store.fileTransfers.map(t => {
-      t.cancel = true
-      return t
-    }))
+    const arr = document.querySelectorAll('.sftp-transport .transfer-control-cancel')
+    arr.forEach(d => {
+      d.click()
+    })
   }
   Store.prototype.cancelTransfer = function (itemId) {
     const { store } = window

package/client/store/watch.js

@@ -18,12 +18,12 @@ import * as ls from '../common/safe-local-storage'
 import { debounce, isEmpty } from 'lodash-es'
 
 export default store => {
-  autoRun(store, () => {
-    store.focus()
-    // store.termSearchOpen = false
-    store.termSearchMatchCount = 0
-    return store.currentTabId
-  }, func => debounce(func, 100)).start()
+  // autoRun(store, () => {
+  //   store.focus()
+  //   // store.termSearchOpen = false
+  //   store.termSearchMatchCount = 0
+  //   return store.currentTabId
+  // }).start()
 
   // autoRun(store, () => {
   //   if (store.menuOpened) {
@@ -99,6 +99,11 @@ export default store => {
     return store._checkedKeys
   }).start()
 
+  // autoRun(store, () => {
+  //   window.store.onLayoutChange()
+  //   return store.layout
+  // }).start()
+
   autoRun(store, () => {
     const tabs = store.getTabs()
     const { currentTabId } = store

package/package.json

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

package/client/components/common/react-subx.jsx

@@ -1 +0,0 @@
-export { Component } from 'manate/react'

package/client/components/common/resize-wrap.jsx

@@ -1,222 +0,0 @@
-/**
- * make child component resizable by drag the horizontal or vertical handle
- * // todo: rerender check
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { isNull, pick, isUndefined } from 'lodash-es'
-import parseInt10 from '../../common/parse-int10'
-import generate from '../../common/uid'
-import memoizeOne from 'memoize-one'
-import {
-  terminalSplitDirectionMap,
-  minTerminalWidth,
-  maxDragMove
-} from '../../common/constants'
-import './resize-wrap.styl'
-
-export default class ResizeWrap extends React.Component {
-  static propTypes = {
-    direction: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    minWidth: PropTypes.number,
-    onEndDrag: PropTypes.func,
-    noResizeEvent: PropTypes.bool
-  }
-
-  getChildIds = (props = this.props) => {
-    return props.children.map(c => c.props.id)
-  }
-
-  getSplitIds = () => {
-    const len = this.props.children.length - 1
-    return this.getSplitIdsCache(len)
-  }
-
-  getSplitIdsCache = memoizeOne((len) => {
-    return new Array(len)
-      .fill(8).map(() => generate())
-  })
-
-  positionProps = [
-    'width',
-    'height',
-    'left',
-    'top'
-  ]
-
-  onDrag = (e) => {
-    const dom = e.target
-    const prev = dom.previousSibling
-    const next = dom.nextSibling
-    const { direction } = this.props
-    const { startPosition } = this
-    if (isNull(e.pageX)) {
-      return
-    }
-    const currentPosition = {
-      x: e.pageX,
-      y: e.pageY
-    }
-
-    const types = ['dom', 'prev', 'next']
-    const doms = [dom, prev, next]
-    const styles = doms.map(d => {
-      const { style } = d
-      const obj = pick(style, this.positionProps)
-      return Object.keys(obj).reduce((prev, k) => {
-        const v = obj[k]
-        return {
-          ...prev,
-          [k]: isUndefined(v)
-            ? v
-            : parseInt10(obj[k].replace('px', ''))
-        }
-      }, {})
-    })
-    let xDiff = currentPosition.x - startPosition.x
-    let yDiff = currentPosition.y - startPosition.y
-    if (Math.abs(xDiff) > maxDragMove) {
-      return
-    }
-    const prevStyle = styles[1]
-    const nextStyle = styles[2]
-    const minW = this.props.minWidth || minTerminalWidth
-    if (direction === terminalSplitDirectionMap.vertical) {
-      if (yDiff > 0 && yDiff > nextStyle.height - minW) {
-        yDiff = nextStyle.height - minW
-      } else if (yDiff < 0 && yDiff < -(prevStyle.height - minW)) {
-        yDiff = -(prevStyle.height - minW)
-      }
-    } else {
-      if (xDiff > 0 && xDiff > nextStyle.width - minW) {
-        xDiff = nextStyle.width - minW
-      } else if (xDiff < 0 && xDiff < -(prevStyle.width - minW)) {
-        xDiff = -(prevStyle.width - minW)
-      }
-    }
-    doms.forEach((d, i) => {
-      this.changePosition(d, direction, xDiff, yDiff, types[i], styles[i])
-    })
-    this.startPosition = currentPosition
-  }
-
-  onDragStart = (e) => {
-    this.startPosition = {
-      x: e.pageX,
-      y: e.pageY
-    }
-  }
-
-  changePosition = (
-    dom,
-    direction,
-    xDiff,
-    yDiff,
-    type,
-    style
-  ) => {
-    const realHeight = style.height
-    const realWidth = style.width
-    const realTop = style.top
-    const realLeft = style.left
-    if (type === 'prev' && direction === terminalSplitDirectionMap.vertical) {
-      dom.style.height = (realHeight + yDiff) + 'px'
-    } else if (type === 'prev') {
-      dom.style.width = (realWidth + xDiff) + 'px'
-    } else if (type === 'dom' && direction === terminalSplitDirectionMap.vertical) {
-      dom.style.top = (realTop + yDiff) + 'px'
-    } else if (type === 'dom') {
-      dom.style.left = (realLeft + xDiff) + 'px'
-    } else if (type === 'next' && direction === terminalSplitDirectionMap.vertical) {
-      dom.style.top = (realTop + yDiff) + 'px'
-      dom.style.height = (realHeight - yDiff) + 'px'
-    } else {
-      dom.style.width = (realWidth - xDiff) + 'px'
-      dom.style.left = (realLeft + xDiff) + 'px'
-    }
-  }
-
-  onDragEnd = () => {
-    const {
-      noResizeEvent,
-      onDragEnd
-    } = this.props
-    if (onDragEnd) {
-      onDragEnd()
-    }
-    if (noResizeEvent) {
-      return
-    }
-    window.dispatchEvent(new CustomEvent('resize'))
-  }
-
-  buildHandleComponent = (prevComponent, direction, index, tid) => {
-    const zIndex = this.props.children.length + 10
-    const cls = classnames(
-      `tw-${tid}`,
-      'term-dragger',
-      `term-dragger-${index}`,
-      `term-dragger-${direction}`
-    )
-    const { left, top, width, height } = prevComponent.props
-    const style = direction === terminalSplitDirectionMap.vertical
-      ? {
-          left: 0,
-          right: 0,
-          zIndex,
-          top: top + height - 2
-        }
-      : {
-          top: 0,
-          bottom: 0,
-          zIndex,
-          left: left + width - 2
-        }
-    const props = {
-      style,
-      ...pick(this, [
-        'onDoubleClick',
-        'onDrag',
-        'onDragStart',
-        'onDragEnd'
-      ]),
-      className: cls,
-      draggable: true
-    }
-    return (
-      <span
-        key={tid}
-        {...props}
-      />
-    )
-  }
-
-  render () {
-    const {
-      children,
-      direction
-    } = this.props
-    const len = children.length
-    if (len < 2) {
-      return children
-    }
-    let splitIndex = 0
-    const splitIds = this.getSplitIds()
-    const newArr = children.reduce((prev, c, i) => {
-      let split = null
-      if (i !== len - 1) {
-        split = this.buildHandleComponent(c, direction, i, splitIds[splitIndex])
-        splitIndex++
-      }
-      return [
-        ...prev,
-        c,
-        split
-      ].filter(d => d)
-    }, [])
-    return newArr
-  }
-}

package/client/components/common/resize-wrap.styl

@@ -1,9 +0,0 @@
-.term-dragger
-  position absolute
-  z-index 1
-.term-dragger-vertical
-  cursor ns-resize
-  height 5px
-.term-dragger-horizontal
-  cursor ew-resize
-  width 5px