@electerm/electerm-react 3.15.175 → 3.15.186

package/client/components/terminal/terminal.jsx

@@ -21,7 +21,8 @@ import {
   rendererTypes,
   isMac,
   isMacJs,
-  connectionMap
+  connectionMap,
+  terminalSerialType
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
@@ -74,6 +75,38 @@ import {
 
 const e = window.translate
 
+// Expands \n \t \r \\ and \xHH hex byte escapes, used to let users type
+// control bytes (e.g. \x01 = Ctrl+A) in the serial "closeSequence" field.
+function expandCloseSequence (text) {
+  let result = ''
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '\\' && i + 1 < text.length) {
+      const next = text[i + 1]
+      if (next === 'n') {
+        result += '\n'
+        i++
+      } else if (next === 't') {
+        result += '\t'
+        i++
+      } else if (next === 'r') {
+        result += '\r'
+        i++
+      } else if (next === '\\') {
+        result += '\\'
+        i++
+      } else if (next === 'x' && /^[0-9a-fA-F]{2}$/.test(text.slice(i + 2, i + 4))) {
+        result += String.fromCharCode(parseInt(text.slice(i + 2, i + 4), 16))
+        i += 3
+      } else {
+        result += text[i]
+      }
+    } else {
+      result += text[i]
+    }
+  }
+  return result
+}
+
 class Term extends Component {
   constructor (props) {
     super(props)
@@ -161,6 +194,9 @@ class Term extends Component {
 
   componentWillUnmount () {
     refs.remove(this.id)
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+    this.touchStartPos = null
     if (window.store.activeTerminalId === this.props.tab.id) {
       window.store.activeTerminalId = ''
     }
@@ -625,6 +661,131 @@ class Term extends Component {
     }
   }
 
+  // ---- Mobile touch support ----
+  // On touch devices, long-press should (1) select the word under the finger
+  // and (2) open the context menu — mirroring desktop right-click behaviour.
+  // xterm.js only uses touch events for scrolling, so we add explicit
+  // long-press detection here.
+  longPressTimer = null
+  touchStartPos = null
+  longPressThreshold = 500 // ms
+  longPressMoveTolerance = 10 // px
+
+  onTouchStart = (e) => {
+    if (e.touches.length !== 1) {
+      return
+    }
+    const touch = e.touches[0]
+    this.touchStartPos = {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      target: e.currentTarget
+    }
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = setTimeout(() => {
+      this.handleLongPress()
+    }, this.longPressThreshold)
+  }
+
+  onTouchMove = (e) => {
+    if (!this.touchStartPos) {
+      return
+    }
+    const touch = e.touches[0]
+    const dx = touch.clientX - this.touchStartPos.clientX
+    const dy = touch.clientY - this.touchStartPos.clientY
+    if (Math.sqrt(dx * dx + dy * dy) > this.longPressMoveTolerance) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = null
+      this.touchStartPos = null
+    }
+  }
+
+  onTouchEnd = () => {
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+    this.touchStartPos = null
+  }
+
+  handleLongPress = () => {
+    if (!this.touchStartPos || this.state.loading) {
+      return
+    }
+    const { clientX, clientY, target } = this.touchStartPos
+
+    // Select the word at the touch position (same as desktop right-click word
+    // select) so the user can immediately copy or act on it.
+    this.selectWordAt(clientX, clientY)
+
+    // Respect pasteWhenContextMenu: when enabled, long-press pastes instead
+    // of showing the menu (same as desktop right-click).
+    if (this.props.config.pasteWhenContextMenu) {
+      this.onPaste()
+      return
+    }
+
+    // Dispatch a synthetic contextmenu event so antd Dropdown's contextMenu
+    // trigger opens the menu at the exact finger position.
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY
+    })
+    target.dispatchEvent(event)
+  }
+
+  selectWordAt = (clientX, clientY) => {
+    if (!this.term) {
+      return
+    }
+    const termElement = this.term.element
+    if (!termElement) {
+      return
+    }
+    const rect = termElement.getBoundingClientRect()
+    const x = clientX - rect.left
+    const y = clientY - rect.top
+    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+      return
+    }
+
+    const cellWidth = rect.width / this.term.cols
+    const cellHeight = rect.height / this.term.rows
+    const col = Math.floor(x / cellWidth)
+    const row = Math.floor(y / cellHeight)
+
+    const buffer = this.term.buffer.active
+    const line = buffer.getLine(row)
+    if (!line) {
+      return
+    }
+
+    const text = line.translateToString(true)
+    const wordSeparator = this.props.config.terminalWordSeparator ||
+      ' ./\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
+
+    // If the touched cell is empty or a separator, nothing to select
+    if (col >= text.length || wordSeparator.includes(text[col])) {
+      return
+    }
+
+    // Find word start
+    let start = col
+    while (start > 0 && !wordSeparator.includes(text[start - 1])) {
+      start--
+    }
+    // Find word end
+    let end = col
+    while (end < text.length && !wordSeparator.includes(text[end])) {
+      end++
+    }
+
+    if (end > start) {
+      this.term.select(start, row, end - start)
+    }
+  }
+
   onContextMenuInner = e => {
     e.preventDefault()
     if (this.state.loading) {
@@ -1856,6 +2017,33 @@ class Term extends Component {
     this.props.delTab(id)
   }
 
+  /**
+   * Manually triggered from the "exit gracefully" control in
+   * session-control.jsx (serial tabs only). Writes the configured key
+   * sequence (default \x01ky = Ctrl+A, k, y to kill a GNU screen window) to
+   * the socket, waits a bit so the remote end (e.g. a Bluetooth console
+   * adapter) can release cleanly, then closes the tab.
+   */
+  exitGracefully = async () => {
+    const { tab } = this.props
+    if (tab.type !== terminalSerialType) {
+      return
+    }
+    if (!this.onClose && this.attachAddon?._sendData) {
+      try {
+        const data = expandCloseSequence(tab.closeSequence || '\\x01ky')
+        if (data) {
+          this.attachAddon._sendData(data)
+        }
+      } catch (err) {
+        console.error('send close sequence failed', err)
+      }
+      const delay = Number(tab.closeSequenceDelay)
+      await new Promise(resolve => setTimeout(resolve, Number.isFinite(delay) && delay >= 0 ? delay : 500))
+    }
+    this.props.delTab(tab.id)
+  }
+
   handleShowInfo = () => {
     const { logName, tab } = this.props
     const infoProps = {
@@ -1926,7 +2114,10 @@ class Term extends Component {
         zIndex: 10
       },
       onDrop: this.onDrop,
-      onContextMenu: this.onContextMenuInner
+      onContextMenu: this.onContextMenuInner,
+      onTouchStart: this.onTouchStart,
+      onTouchMove: this.onTouchMove,
+      onTouchEnd: this.onTouchEnd
     }
     // const fileProps = {
     //   type: 'file',

package/client/components/terminal/terminal.styl

@@ -28,8 +28,6 @@
 .horizontal
   .term-wrap.not-first-term
     border-left 1px solid var(--main-lighter)
-.term-sftp-tabs
-  margin-left 5px
 
 #container
   .xterm

package/client/components/terminal-info/run-cmd.jsx

@@ -206,7 +206,7 @@ export default (props) => {
     },
     {
       name: 'disks',
-      cmd: 'df -h',
+      cmd: 'df -hP',
       interval: 10000,
       delay: 1600,
       formatter: formatDisks

package/client/components/tree-list/tree-list.jsx

@@ -14,6 +14,7 @@ import {
 } from '../../common/constants'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
 import findParentBySel from '../../common/find-parent'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import copy from 'json-deep-copy'
 import NewButtonsGroup from './bookmark-toolbar'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
@@ -479,8 +480,10 @@ export default class ItemListTree extends Component {
       )
   }
 
-  onDragEnter = e => {
-    e.preventDefault()
+  // resolve the .tree-item under the pointer and show a directional
+  // drop indicator (top edge = before, bottom edge = after).
+  // NOTE: preventDefault on dragover is required for onDrop to fire.
+  updateDropIndicator = e => {
     let {
       target
     } = e
@@ -488,7 +491,12 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    target.classList.add('item-dragover-top')
+    setDropIndicator(target, isDropAfterHalf(e, target))
+  }
+
+  onDragEnter = e => {
+    e.preventDefault()
+    this.updateDropIndicator(e)
   }
 
   onDragLeave = e => {
@@ -500,25 +508,21 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    target.classList.remove('item-dragover-top')
+    clearDropIndicator(target)
   }
 
   onDragOver = e => {
-    let {
-      target
-    } = e
-    const tar = findParentBySel(target, '.tree-item')
-    if (tar) {
-      target = tar
-    }
-    target.classList.add('item-dragover-top')
+    e.preventDefault()
+    this.updateDropIndicator(e)
   }
 
   onDrop = action(e => {
     e.preventDefault()
-    const elems = document.querySelectorAll('.tree-item.item-dragover-top')
+    const elems = document.querySelectorAll(
+      '.tree-item.dnd-before, .tree-item.dnd-after'
+    )
     elems.forEach(elem => {
-      elem.classList.remove('item-dragover-top')
+      clearDropIndicator(elem)
     })
     let {
       target
@@ -537,6 +541,9 @@ export default class ItemListTree extends Component {
     const pidDrops = target.getAttribute('data-parent-id') || ''
     const pidDropsArr = pidDrops.split('#')
     const pidDrop = pidDropsArr[pidDropsArr.length - 1]
+    // bottom half of the target row => insert after it, so the last
+    // item/group in a list can receive a drop (append to the end).
+    const insertAfter = isDropAfterHalf(e, target)
     // can not drag item to its own children
     if (
       (idDragged === 'default' &&
@@ -566,8 +573,9 @@ export default class ItemListTree extends Component {
       if (indexDrop < 0) {
         return
       }
+      const insertIndex = insertAfter ? indexDrop + 1 : indexDrop
       bookmarkGroups.splice(
-        indexDrop,
+        insertIndex,
         0,
         dragItem
       )
@@ -580,9 +588,13 @@ export default class ItemListTree extends Component {
         )
         : false
       if (parentDrag) {
-        parentDrag.bookmarkGroupIds = (parentDrag.bookmarkGroupIds || []).filter(
-          id => id !== idDragged
-        )
+        // remove from old parent IN PLACE: manate only reacts to in-place
+        // array mutations (the delete inside splice), not reassignment.
+        const fromArr = parentDrag.bookmarkGroupIds || []
+        const fromIdx = fromArr.indexOf(idDragged)
+        if (fromIdx >= 0) {
+          fromArr.splice(fromIdx, 1)
+        }
       }
       const parentDrop = pidDrop
         ? bookmarkGroups.find(
@@ -594,20 +606,18 @@ export default class ItemListTree extends Component {
       if (!parentDrop) {
         return
       }
+      const dropArr = parentDrop.bookmarkGroupIds || []
       if (!pidDrop) {
-        parentDrop.bookmarkGroupIds = uniq(
-          [
-            ...(parentDrop.bookmarkGroupIds || []),
-            idDragged
-          ]
-        )
+        if (!dropArr.includes(idDragged)) {
+          dropArr.push(idDragged)
+        }
       } else {
-        const arr = parentDrop.bookmarkGroupIds || []
-        let index = arr.findIndex(item => item === idDrop)
+        let index = dropArr.findIndex(item => item === idDrop)
         if (index < 0) {
           index = 0
         }
-        arr.splice(index, 0, idDragged)
+        const insertIndex = insertAfter ? index + 1 : index
+        dropArr.splice(insertIndex, 0, idDragged)
       }
     } else {
       const parentDrag = bookmarkGroups.find(
@@ -616,9 +626,13 @@ export default class ItemListTree extends Component {
       if (!parentDrag) {
         return
       }
-      parentDrag.bookmarkIds = (parentDrag.bookmarkIds || []).filter(
-        id => id !== idDragged
-      )
+      // remove from old parent IN PLACE: manate only reacts to in-place
+      // array mutations (the delete inside splice), not reassignment.
+      const fromArr = parentDrag.bookmarkIds || []
+      const fromIdx = fromArr.indexOf(idDragged)
+      if (fromIdx >= 0) {
+        fromArr.splice(fromIdx, 1)
+      }
       const parentDrop = isGroupDrop
         ? bookmarkGroups.find(
           item => item.id === idDrop
@@ -629,21 +643,25 @@ export default class ItemListTree extends Component {
       if (!parentDrop) {
         return
       }
+      const dropArr = parentDrop.bookmarkIds || []
       if (isGroupDrop) {
-        parentDrop.bookmarkIds = uniq(
-          [
-            ...(parentDrop.bookmarkIds || []),
-            idDragged
-          ]
-        )
+        if (!dropArr.includes(idDragged)) {
+          dropArr.push(idDragged)
+        }
       } else {
-        const arr = parentDrop.bookmarkIds || []
-        let index = arr.findIndex(item => item === idDrop)
+        let index = dropArr.findIndex(item => item === idDrop)
         if (index < 0) {
           index = 0
         }
-        arr.splice(index, 0, idDragged)
+        const insertIndex = insertAfter ? index + 1 : index
+        dropArr.splice(insertIndex, 0, idDragged)
       }
+      // a manual bookmark reorder overrides any active sort, otherwise
+      // buildVisibleTreeRows would re-sort bookmarks and hide this order.
+      setItemJSON(treeSortLsKey, null)
+      this.setState({
+        sort: null
+      })
     }
     if (
       isGroupDrag &&

package/client/css/basic.styl

@@ -42,6 +42,20 @@ a
 .cap
   text-transform capitalize
 
+// shared drag-and-drop reorder indicators (vertical lists)
+// first half of the target  => insert before => top edge
+// second half of the target => insert after  => bottom edge
+// (tabs use their own horizontal left/right line indicators)
+.dnd-before
+  box-shadow inset 0 2px 0 0 var(--primary)
+.dnd-after
+  box-shadow inset 0 -2px 0 0 var(--primary)
+// antd table rows: box-shadow on <tr> is not rendered, apply on cells
+tr.dnd-before > td
+  box-shadow inset 0 2px 0 0 var(--primary)
+tr.dnd-after > td
+  box-shadow inset 0 -2px 0 0 var(--primary)
+
 .sync-data-compare
   .sync-suggest-action
     color var(--success)

package/client/css/mobile.styl

@@ -1,7 +1,3 @@
-// Session pane tab label: show full name by default, short label on mobile
-.type-tab-short
-  display none
-
 // ---------------------------------------------------------------------------
 // Mobile UI driven by store.isMobile (is-mobile class on root)
 // Breakpoint: 600px (see mobileBreakpoint in constants.js)
@@ -33,6 +29,24 @@
       // close icon always visible on mobile
       .tab-close
         display block
+  // keep a left drag grip for the custom title bar (not webapp, not system-ui),
+  // so the empty area left of the tab is draggable. mac needs extra room for
+  // the traffic-light window controls in the top-left.
+  &.not-system-ui.not-webapp
+    .mobile-tabs-inner
+      margin-left 20px !important
+    &.is-mac
+      .mobile-tabs-inner
+        margin-left 72px !important
+  // AppDrag wraps .mobile-tabs-inner under a custom title bar; make it the flex
+  // item so the tab layout is unchanged and the inner's left drag grip stays
+  // inside the draggable .app-drag box.
+  .tabs.mobile-tabs > .app-drag
+    flex 1
+    min-width 0
+    display flex
+    align-items center
+    overflow hidden
   .mobile-tabs-extra
     flex-shrink 0
     display flex
@@ -147,11 +161,19 @@
   .upgrade-panel
     max-width calc(100vw - 20px)
 
-  // ---- 9. Session pane tab label: hide full name, show short label
-  .type-tab-full
-    display none
-  .type-tab-short
-    display inline
+  // ---- 9. Terminal touch support: prevent the browser's native long-press
+  //        callout (iOS "Copy/Look Up" menu) and text-selection gesture from
+  //        interfering with xterm's own touch handling and our custom
+  //        long-press context-menu detection. xterm.js already sets
+  //        user-select:none on .xterm; we additionally suppress the iOS
+  //        callout and set touch-action so the browser does not compete with
+  //        xterm for touch gesture interpretation.
+  .term-wrap
+    -webkit-touch-callout none
+    -webkit-tap-highlight-color transparent
+    .xterm
+      -webkit-touch-callout none
+      touch-action none
 
 // ---------------------------------------------------------------------------
 // Touch-primary devices only (feature-detected via pointer media query, not

package/client/store/item.js

@@ -82,18 +82,22 @@ export default Store => {
     window.store[type] = arr
   }
 
-  Store.prototype.adjustOrder = function (type, fromId, toId) {
+  Store.prototype.adjustOrder = function (type, fromId, toId, insertAfter = false) {
     const { store } = window
     const items = store.getItems(type)
     const fromIndex = items.findIndex(t => t.id === fromId)
-    let toIndex = items.findIndex(t => t.id === toId)
+    const toIndex = items.findIndex(t => t.id === toId)
     if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
       return
     }
-    if (fromIndex < toIndex) {
-      toIndex = toIndex - 1
-    }
+    // insertAfter lets the item land after the target, so the last
+    // item can receive a drop (insertIndex can reach items.length).
+    let insertIndex = insertAfter ? toIndex + 1 : toIndex
     const [removed] = items.splice(fromIndex, 1)
-    items.splice(toIndex, 0, removed)
+    // account for the index shift caused by the removal above
+    if (fromIndex < insertIndex) {
+      insertIndex = insertIndex - 1
+    }
+    items.splice(insertIndex, 0, removed)
   }
 }

package/package.json

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