@electerm/electerm-react 1.40.20 → 1.50.31

package/client/store/index.js

@@ -134,7 +134,6 @@ class Store {
   get inActiveTerminal () {
     const { store } = window
     return !store.showModal &&
-      store.termFocused &&
       store.currentTab &&
       (
         store.currentTab.pane === paneMap.ssh ||
@@ -211,14 +210,6 @@ class Store {
     ]
   }
 
-  get config () {
-    return JSON.parse(window.store._config || '{}')
-  }
-
-  get sftpSortSetting () {
-    return JSON.parse(window.store._sftpSortSetting)
-  }
-
   get onOperation () {
     const {
       store
@@ -229,26 +220,6 @@ class Store {
       store.showFileModal
   }
 
-  get topMenuHeight () {
-    return 0
-  }
-
-  get langs () {
-    return JSON.parse(window.store._langs)
-  }
-
-  get upgradeInfo () {
-    return JSON.parse(window.store._upgradeInfo)
-  }
-
-  get transferToConfirm () {
-    return JSON.parse(window.store._transferToConfirm)
-  }
-
-  get settingItem () {
-    return JSON.parse(window.store._settingItem)
-  }
-
   get uiThemeConfig () {
     const { store } = window
     const themeConf = store.getUiThemeConfig()
@@ -293,7 +264,7 @@ class Store {
   }
 }
 
-const getterProps = [
+const arrGetterProps = [
   'expandedKeys',
   'checkedKeys',
   'addressBookmarks',
@@ -314,7 +285,7 @@ const getterProps = [
   'resolutions'
 ]
 
-for (const prop of getterProps) {
+for (const prop of arrGetterProps) {
   Object.defineProperty(Store.prototype, prop, {
     get: function () {
       return JSON.parse(window.store[`_${prop}`] || '[]').filter(d => d)
@@ -322,6 +293,24 @@ for (const prop of getterProps) {
   })
 }
 
+const getterProps = [
+  'langs',
+  'config',
+  'sftpSortSetting',
+  'upgradeInfo',
+  'transferToConfirm',
+  'terminalInfoProps',
+  'settingItem'
+]
+
+for (const prop of getterProps) {
+  Object.defineProperty(Store.prototype, prop, {
+    get: function () {
+      return JSON.parse(window.store[`_${prop}`] || '{}')
+    }
+  })
+}
+
 loadDataExtend(Store)
 eventExtend(Store)
 dbUpgradeExtend(Store)
@@ -346,6 +335,6 @@ transferExtend(Store)
 addressBookmarkExtend(Store)
 
 export const StateStore = Store
-const store = manage(new Store())
+const store = manage(new Store(), 1)
 
 export default store

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)
       })
     }
-  }
+  }, 200)
 
   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()
       }
@@ -186,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/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,15 @@
 
 import { uniq, debounce, findIndex } from 'lodash-es'
 import {
-  tabActions
+  tabActions,
+  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 () {
@@ -19,6 +25,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 +49,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 +66,7 @@ export default Store => {
     postMsg({
       action: tabActions.addTab,
       tab,
+      batch: tab?.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch,
       index
     })
   }
@@ -71,4 +98,67 @@ 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
+    } = 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.20",
+  "version": "1.50.31",
   "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
-  }
-}