@electerm/electerm-react 5.3.26 → 5.5.9

package/client/components/terminal/mixins/term-theme.js

@@ -0,0 +1,190 @@
+import deepCopy from 'json-deep-copy'
+import { loadWebglAddon } from '../xterm-loader.js'
+import { rendererTypes } from '../../../common/constants.js'
+import {
+  createRendererThemeConfig,
+  handleTerminalColorQuery,
+  blendSelectionOverBackground
+} from '../terminal-color-query.mjs'
+
+/**
+ * Renderer (DOM / WebGL) and theming, including the OSC 10/11 colour query
+ * handlers that let shells ask the terminal for its background colour.
+ */
+export const themeMixin = {
+  async loadRenderer (term, config) {
+    // xterm 6.x: only the built-in DOM renderer and the WebGL addon exist
+    // (the canvas renderer addon was removed in 6.x). 'dom' = no addon loaded
+    // (built-in DOM renderer). Legacy 'canvas' settings fall back to DOM.
+    if (config.rendererType === rendererTypes.webGL) {
+      try {
+        const WebglAddon = await loadWebglAddon()
+        const webglAddon = new WebglAddon()
+        this.webglAddon = webglAddon
+        // On macOS native fullscreen the GPU/WebGL context can be lost when
+        // the window migrates across Spaces. Without a listener xterm keeps
+        // drawing into a dead context and every terminal goes black while the
+        // rest of the UI stays alive. Rebuild the addon to recover.
+        this.webglContextLossDisposable = webglAddon.onContextLoss(this.handleWebglContextLoss)
+        term.loadAddon(webglAddon)
+      } catch (e) {
+        console.error('render with webgl failed, fallback to dom renderer')
+        console.error(e)
+        // built-in DOM renderer is used (no addon loaded)
+        this.webglAddon = null
+      }
+    }
+  },
+
+  reloadWebglRenderer (reason = 'reload') {
+    console.warn(`webgl renderer ${reason}, rebuilding`)
+    try {
+      this.webglContextLossDisposable?.dispose?.()
+      this.webglContextLossDisposable = null
+    } catch (e) {
+      console.error(e)
+    }
+    try {
+      this.webglAddon?.dispose?.()
+    } catch (e) {
+      console.error(e)
+    }
+    this.webglAddon = null
+    const { term } = this
+    const { config } = this.props
+    return this.loadRenderer(term, config)
+      .then(() => {
+        term.refresh(0, term.rows - 1)
+      })
+      .catch(e => {
+        console.error(`webgl renderer ${reason} failed`, e)
+      })
+  },
+
+  handleWebglContextLoss (webglAddon = this.webglAddon) {
+    if (this.webglRecovering || !webglAddon) {
+      return
+    }
+    this.webglRecovering = true
+    this.reloadWebglRenderer('context loss')
+      .finally(() => {
+        this.webglRecovering = false
+      })
+  },
+
+  disposeTerminalColorQueryHandlers () {
+    this.terminalColorQueryDisposables.forEach(disposable => disposable?.dispose?.())
+    this.terminalColorQueryDisposables.length = 0
+  },
+
+  getVisibleTerminalBackground () {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    // The store value (uiThemeConfig.main) is always immediately up-to-date
+    // when the theme changes, because it reads directly from store.config.theme.
+    // The CSS --main variable lags behind because UiTheme's useEffect runs
+    // asynchronously after componentDidUpdate. So we prioritise the store
+    // value, and only fall back to CSS (for custom-CSS edge cases) or the
+    // terminal theme background (last resort).
+    const root = document.documentElement
+    const cssMain = root && window.getComputedStyle
+      ? window.getComputedStyle(root).getPropertyValue('--main').trim()
+      : ''
+    return uiThemeConfig.main || cssMain || this.props.themeConfig.background
+  },
+
+  getVisibleTerminalForeground () {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    return uiThemeConfig.text
+  },
+
+  registerTerminalColorQueryHandlers (term, themeConfig = {}) {
+    this.disposeTerminalColorQueryHandlers()
+    if (!term?.parser?.registerOscHandler) {
+      return
+    }
+    const background = this.getVisibleTerminalBackground()
+    const foregroundFallback = this.getVisibleTerminalForeground()
+    this.terminalColorQueryDisposables.push(
+      term.parser.registerOscHandler(10, data => {
+        return handleTerminalColorQuery(term, 10, themeConfig.foreground, foregroundFallback, data)
+      }),
+      term.parser.registerOscHandler(11, data => {
+        return handleTerminalColorQuery(term, 11, background, themeConfig.background, data)
+      })
+    )
+  },
+
+  getRendererThemeConfig (themeConfig = this.props.themeConfig) {
+    return createRendererThemeConfig(
+      deepCopy(themeConfig),
+      this.props.config.rendererType,
+      this.getVisibleTerminalBackground()
+    )
+  },
+
+  /**
+   * Apply the current renderer theme to the terminal and trigger a repaint.
+   * When `deferred` is true (WebGL mode), a second repaint is scheduled on
+   * the next animation frame so the theme picks up CSS --main changes that
+   * UiTheme's useEffect applies asynchronously after componentDidUpdate.
+   * The optional `term` parameter is used during initTerminal, where
+   * this.term hasn't been assigned yet.
+   */
+  applyTerminalTheme (deferred = false, term = this.term) {
+    if (!term || this.onClose) {
+      return
+    }
+    term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+    this.fixSelectionColors(term)
+    term.refresh(0, term.rows - 1)
+    if (deferred && this.props.config.rendererType === rendererTypes.webGL) {
+      window.cancelAnimationFrame(this.timers.themeRaf)
+      this.timers.themeRaf = window.requestAnimationFrame(() => {
+        if (!this.term || this.onClose) {
+          return
+        }
+        this.term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+        this.fixSelectionColors(this.term)
+        this.term.refresh(0, this.term.rows - 1)
+      })
+    }
+  },
+
+  /**
+   * xterm computes its DOM selection colour as blend(theme.background,
+   * selectionBackground). The terminal background is forced transparent
+   * (rgba(0,0,0,0)) so electerm's own CSS background / image shows through,
+   * which makes the blend run over transparent-black. Recompute the selection
+   * colours over the real visible background, from the *configured* theme
+   * colours — xterm's internal selectionBackgroundTransparent forces opaque
+   * colours down to 0.3 alpha (xterm#2737), which would make every selection
+   * translucent even when the user configured an opaque one.
+   */
+  fixSelectionColors (term) {
+    const themeConfig = this.props.themeConfig || {}
+    const themeService = term?._core?._themeService
+    if (!themeService?.modifyColors) {
+      return
+    }
+    const visibleBackground = this.getVisibleTerminalBackground()
+    // xterm's DEFAULT_SELECTION, used when the theme omits a selection color
+    const selectionFallback = 'rgba(255, 255, 255, 0.3)'
+    const inactiveFallback = themeConfig.selectionBackground || selectionFallback
+    themeService.modifyColors((c) => {
+      const active = blendSelectionOverBackground(
+        visibleBackground,
+        themeConfig.selectionBackground || selectionFallback
+      )
+      if (active) {
+        c.selectionBackgroundOpaque = active
+      }
+      const inactive = blendSelectionOverBackground(
+        visibleBackground,
+        themeConfig.selectionInactiveBackground || inactiveFallback
+      )
+      if (inactive) {
+        c.selectionInactiveBackgroundOpaque = inactive
+      }
+    })
+  }
+}

package/client/components/terminal/mixins/term-touch.js

@@ -0,0 +1,523 @@
+/**
+ * Mobile touch support — active only while `store.isTouchDevice` is true.
+ *
+ * `store.isTouchDevice` is flipped by main.jsx from the real pointer input
+ * (mouse → false, touch/pen → true), and a pointerdown always precedes the
+ * touch event it stands for, so by the time a touchstart reaches us the flag
+ * already reflects the device the user is actually operating. A mouse-driven
+ * desktop therefore never enters any of this code, and the whole gesture
+ * layer is gated at `onTouchStart` alone: every other handler needs the
+ * gesture state that only a touch start can create, so a stray event cannot
+ * strand a half-finished gesture when the flag flips mid-gesture.
+ *
+ * Why this exists at all: xterm.js has **no** touch text selection. Its touch
+ * layer maps gestures to scrolling only (`-xterm-gesturestart/-change`, see
+ * @xterm/xterm), and `-xterm-gesturetap` has no consumer in core. Every touch
+ * terminal therefore has to build selection itself; the previous version here
+ * could only ever select a single word, which is what made copying painful.
+ *
+ * Gesture map (touch mode only):
+ *   tap              → clear any selection, focus (opens the soft keyboard)
+ *   double tap       → select the word under the finger
+ *   triple tap       → select the whole line
+ *   long press       → select the word, then KEEP DRAGGING to extend it,
+ *                      auto-scrolling while the finger is past an edge
+ *   release, dragged → copy (copyWhenSelect on) or open the menu
+ *   release, no drag → open the menu, exactly as before
+ *   two fingers      → left alone: xterm's own pinch/scroll handling
+ *
+ * Dragging out a selection is only ever an approximation of what a phone user
+ * expects, so the menu also offers "select text" (see onSelectTextMode): it
+ * opens the whole buffer in a full-screen read-only textarea where the OS
+ * supplies real selection handles. That overlay is an ordinary DOM surface, so
+ * `onTouchStart` bails out of it — see isInsideSelectText().
+ *
+ * Two things that are easy to get wrong:
+ *  - `term.select()` takes a BUFFER-ABSOLUTE row, not a viewport row. Passing
+ *    the raw viewport row selects the wrong text as soon as the user has
+ *    scrolled back — that was a real bug in the single-word version.
+ *  - xterm registers its touch listeners on `document`, while React's root
+ *    container sits below it, so our `onTouchMove` runs first and a plain
+ *    `stopPropagation()` is enough to veto xterm's scroll for the duration of
+ *    the drag. `preventDefault()` is not an option: React listens to
+ *    `touchmove` passively, so it is ignored (with a console warning).
+ */
+
+const DEFAULT_WORD_SEPARATOR = './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
+
+// the select-text overlay; its own native selection must stay out of the
+// terminal gesture layer
+const SELECT_TEXT_CLASS = '.terminal-select-text'
+
+// tap detection
+const DOUBLE_TAP_MS = 350
+const DOUBLE_TAP_PX = 24
+
+// edge auto-scroll: a short delay before it kicks in, then one scroll step
+// per interval
+const AUTOSCROLL_DELAY = 260
+const AUTOSCROLL_INTERVAL = 60
+
+export const touchMixin = {
+  isTouchMode () {
+    const store = window.store
+    return !!(store && store.isTouchDevice)
+  },
+
+  // ---- gesture entry points, wired up in terminal.jsx ----
+
+  onTouchStart (e) {
+    // the one and only touch-mode gate — see the file header
+    if (!this.isTouchMode()) {
+      return
+    }
+    // the select-text overlay is a normal DOM surface: its native selection
+    // gestures must not be recycled into terminal gestures. Only a touchstart
+    // is checked, which is enough — the other handlers need gesture state that
+    // only a touchstart can create.
+    if (this.isInsideSelectText(e)) {
+      return
+    }
+    // two or more fingers mean zoom/scroll for xterm; abort whatever we were
+    // doing and stay out of the way
+    if (e.touches.length !== 1) {
+      this.cancelTouchGesture()
+      return
+    }
+    this.cancelTouchGesture()
+    const touch = e.touches[0]
+    this.touchStartPos = {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      target: e.currentTarget
+    }
+    this.longPressFired = false
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = setTimeout(() => {
+      this.handleLongPress()
+    }, this.longPressThreshold)
+  },
+
+  onTouchMove (e) {
+    // nothing in flight → not our gesture (this also covers touch mode being
+    // off, since only a gated onTouchStart can put state in flight)
+    if (!this.dragSelect && !this.touchStartPos) {
+      return
+    }
+    const touch = e.touches[0]
+    if (!touch) {
+      return
+    }
+    if (this.dragSelect) {
+      // veto xterm's document-level gesture handler so the drag selects
+      // instead of scrolling
+      e.stopPropagation()
+      this.lastDragTouch = {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      }
+      this.dragSelect.moved = true
+      this.scheduleDragUpdate()
+      return
+    }
+    const dx = touch.clientX - this.touchStartPos.clientX
+    const dy = touch.clientY - this.touchStartPos.clientY
+    if (Math.sqrt(dx * dx + dy * dy) > this.longPressMoveTolerance) {
+      // it is a scroll/pan, not a long press — hand it back to xterm
+      this.cancelLongPress()
+    }
+  },
+
+  onTouchEnd (e) {
+    const gesture = this.dragSelect
+    const startPos = this.touchStartPos
+    const longPressed = this.longPressFired
+
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+
+    // touchmove is coalesced to one update per frame, so flush the pending
+    // frame here to make the final selection match where the finger lifted
+    if (gesture && gesture.moved && this.lastDragTouch) {
+      const coords = this.toBufferCoords(
+        this.lastDragTouch.clientX,
+        this.lastDragTouch.clientY
+      )
+      if (coords) {
+        this.applySelection(gesture.anchor, coords)
+      }
+    }
+    window.cancelAnimationFrame(this.dragFrame)
+    this.dragFrame = 0
+    this.stopAutoScroll()
+    this.dragSelect = null
+    this.lastDragTouch = null
+    this.touchStartPos = null
+    this.longPressFired = false
+
+    if (gesture) {
+      if (gesture.moved && this.props.config.copyWhenSelect) {
+        // mobile has no Ctrl+C — copy on release and skip the menu; the
+        // selection stays visible so the user can still see what was copied
+        this.copySelectionToClipboard()
+        return
+      }
+      // no drag, or auto-copy off: the menu is the way to act on the
+      // selection, and its Copy item now covers a real multi-line range
+      // instead of a single word. Anchor it under the finger that lifted,
+      // which for a long drag is where the user is actually looking.
+      const endTouch = gesture.moved && e.changedTouches && e.changedTouches[0]
+      this.openContextMenuAt(
+        endTouch ? endTouch.clientX : gesture.clientX,
+        endTouch ? endTouch.clientY : gesture.clientY,
+        gesture.target
+      )
+      return
+    }
+    if (longPressed) {
+      // long pressed on a separator/blank cell, so nothing got selected —
+      // still offer the menu, as before
+      if (startPos) {
+        this.openContextMenuAt(startPos.clientX, startPos.clientY, startPos.target)
+      }
+      return
+    }
+    if (!startPos) {
+      // the gesture turned into a scroll, which is xterm's job
+      return
+    }
+    this.handleTap(e.changedTouches[0])
+  },
+
+  /**
+   * A tap that never became a drag: single → focus + drop the selection,
+   * double → select the word, triple → select the line.
+   */
+  handleTap (touch) {
+    if (!touch || !this.term) {
+      return
+    }
+    const { clientX, clientY } = touch
+    const now = Date.now()
+    const near = this.lastTapPos &&
+      Math.abs(clientX - this.lastTapPos.clientX) < DOUBLE_TAP_PX &&
+      Math.abs(clientY - this.lastTapPos.clientY) < DOUBLE_TAP_PX
+    this.tapCount = (now - this.lastTapTime < DOUBLE_TAP_MS && near)
+      ? this.tapCount + 1
+      : 1
+    this.lastTapTime = now
+    this.lastTapPos = { clientX, clientY }
+
+    if (this.tapCount === 2 && this.selectWordAt(clientX, clientY)) {
+      this.term.focus()
+      return
+    }
+    if (this.tapCount >= 3) {
+      this.tapCount = 0
+      const coords = this.toBufferCoords(clientX, clientY)
+      if (coords) {
+        // selectLines() takes buffer-absolute line indices, same as select()
+        this.term.selectLines(coords.absRow, coords.absRow)
+        this.term.focus()
+        return
+      }
+    }
+    if (this.term.hasSelection()) {
+      this.term.clearSelection()
+    }
+    // xterm's own touch handler calls preventDefault()/stopPropagation() on
+    // touchstart/touchend, which suppresses the synthesised mousedown xterm
+    // relies on to focus its hidden helper textarea — so a tap never focuses
+    // the terminal by itself and the soft keyboard would never open. Focusing
+    // here runs synchronously inside the user gesture, so iOS/Android show it.
+    this.term.focus()
+  },
+
+  handleLongPress () {
+    if (!this.touchStartPos || this.state.loading) {
+      return
+    }
+    this.longPressFired = true
+    // a long press is not part of any tap sequence
+    this.tapCount = 0
+    this.lastTapPos = null
+    const { clientX, clientY, target } = this.touchStartPos
+
+    const anchor = this.selectWordAt(clientX, clientY)
+
+    // pasteWhenContextMenu means "long press pastes" — honour that contract
+    // and never take over the gesture with a drag
+    if (this.props.config.pasteWhenContextMenu) {
+      this.onPaste()
+      return
+    }
+    if (!anchor) {
+      return
+    }
+    this.dragSelect = {
+      anchor,
+      moved: false,
+      clientX,
+      clientY,
+      target
+    }
+    this.lastDragTouch = { clientX, clientY }
+  },
+
+  isInsideSelectText (e) {
+    const target = e.target
+    return !!(target && target.closest && target.closest(SELECT_TEXT_CLASS))
+  },
+
+  // ---- select-text overlay ----
+  // The full-screen read-only textarea behind the menu's "select text" item.
+  // Dragging a selection out on the canvas is only ever an approximation of a
+  // native one, so this hands the whole buffer to the platform instead; the
+  // component itself is ./terminal-select-text.jsx.
+
+  onSelectTextMode () {
+    const text = this.getSelectableBufferText()
+    if (!text) {
+      return
+    }
+    this.setState({
+      selectTextVisible: true,
+      selectTextContent: text
+    })
+  },
+
+  handleSelectTextClose () {
+    this.setState({
+      selectTextVisible: false,
+      selectTextContent: ''
+    })
+  },
+
+  handleSelectTextAll () {
+    const el = this.selectTextRef.current
+    if (!el) {
+      return
+    }
+    // readOnly, so this does not raise the soft keyboard; the element still
+    // has to be focused or browsers will not paint the selection
+    el.focus({ preventScroll: true })
+    el.setSelectionRange(0, el.value.length)
+  },
+
+  handleSelectTextCopy () {
+    const el = this.selectTextRef.current
+    if (!el) {
+      return
+    }
+    const { value, selectionStart, selectionEnd } = el
+    // nothing selected by hand → "copy" means the whole buffer, which is what
+    // a phone user means after opening this panel
+    this.copyToClipboard(
+      selectionEnd > selectionStart
+        ? value.slice(selectionStart, selectionEnd)
+        : value
+    )
+  },
+
+  // ---- selection plumbing ----
+
+  /**
+   * Selects the word under the point and returns the anchor a following drag
+   * extends from. The anchor is the word start, so a drag always keeps the
+   * whole word. Returns null when there is no usable coordinate mapping.
+   */
+  selectWordAt (clientX, clientY) {
+    if (!this.term) {
+      return null
+    }
+    const coords = this.toBufferCoords(clientX, clientY)
+    if (!coords) {
+      return null
+    }
+    const { col, absRow } = coords
+    const anchor = { col, absRow }
+    const line = this.term.buffer.active.getLine(absRow)
+    if (!line) {
+      return anchor
+    }
+    const text = line.translateToString(true)
+    const wordSeparator = this.props.config.terminalWordSeparator ||
+      DEFAULT_WORD_SEPARATOR
+
+    // touched a blank/separator cell: nothing to expand, but it is still a
+    // valid place to start dragging from
+    const char = col < text.length ? text[col] : ''
+    if (!char || wordSeparator.includes(char)) {
+      return anchor
+    }
+
+    let start = col
+    while (start > 0 && !wordSeparator.includes(text[start - 1])) {
+      start--
+    }
+    let end = col
+    while (end < text.length && !wordSeparator.includes(text[end])) {
+      end++
+    }
+    if (end > start) {
+      this.term.select(start, absRow, end - start)
+    }
+    return { col: start, absRow }
+  },
+
+  /**
+   * Client point → buffer cell. `beyond` is -1/1 while the finger is above or
+   * below the screen area, which is what drives edge auto-scrolling.
+   */
+  toBufferCoords (clientX, clientY) {
+    const term = this.term
+    if (!term || !term.element || !term.cols || !term.rows) {
+      return null
+    }
+    // measure against the screen element (exactly cols × rows cells) rather
+    // than the whole `.xterm` box, whose padding and scrollbar would skew the
+    // mapping by a growing amount the further the finger moves
+    const screen = term.element.querySelector('.xterm-screen') || term.element
+    const rect = screen.getBoundingClientRect()
+    if (!rect.width || !rect.height) {
+      return null
+    }
+    const cellWidth = rect.width / term.cols
+    const cellHeight = rect.height / term.rows
+    const col = Math.min(
+      term.cols - 1,
+      Math.max(0, Math.floor((clientX - rect.left) / cellWidth))
+    )
+    const viewportRow = Math.min(
+      term.rows - 1,
+      Math.max(0, Math.floor((clientY - rect.top) / cellHeight))
+    )
+    return {
+      col,
+      beyond: clientY < rect.top ? -1 : (clientY > rect.bottom ? 1 : 0),
+      // the selection model stores buffer-absolute rows, not viewport rows
+      absRow: term.buffer.active.viewportY + viewportRow
+    }
+  },
+
+  /**
+   * Selects from `a` to `b`, in either direction.
+   *
+   * `term.select()` only accepts "start + length" — it clears any end point,
+   * so a backwards drag has to be normalised to min/max. The length is a
+   * linear character count across buffer rows, matching xterm's own
+   * `toSelectionLength = cols * (endY - startY) + (endX - startX + 1)` and the
+   * inverse in `finalSelectionEnd`, which is why a multi-line drag needs no
+   * private API.
+   */
+  applySelection (a, b) {
+    if (!this.term || !a || !b) {
+      return
+    }
+    const forward = a.absRow < b.absRow ||
+      (a.absRow === b.absRow && a.col <= b.col)
+    const start = forward ? a : b
+    const end = forward ? b : a
+    const length = this.term.cols * (end.absRow - start.absRow) +
+      (end.col - start.col + 1)
+    this.term.select(start.col, start.absRow, Math.max(1, length))
+  },
+
+  /**
+   * Coalesces touchmove to one update per frame: every `term.select()` fires
+   * `onSelectionChange`, and the terminal re-renders on that, so a raw
+   * per-event update makes the drag stutter on slower phones.
+   */
+  scheduleDragUpdate () {
+    if (this.dragFrame) {
+      return
+    }
+    this.dragFrame = window.requestAnimationFrame(() => {
+      this.dragFrame = 0
+      const gesture = this.dragSelect
+      const touch = this.lastDragTouch
+      if (!gesture || !touch) {
+        return
+      }
+      const coords = this.toBufferCoords(touch.clientX, touch.clientY)
+      if (!coords) {
+        return
+      }
+      this.applySelection(gesture.anchor, coords)
+      this.autoScrollFrom(coords.beyond)
+    })
+  },
+
+  /**
+   * Keeps scrolling while the finger is held past the top/bottom edge, and
+   * re-extends the selection as the buffer moves under it. The anchor is in
+   * absolute coordinates, so it stays put while the viewport scrolls.
+   */
+  autoScrollFrom (beyond) {
+    if (!beyond) {
+      this.stopAutoScroll()
+      return
+    }
+    if (this.autoScrollDir === beyond) {
+      return
+    }
+    this.stopAutoScroll()
+    this.autoScrollDir = beyond
+    const tick = () => {
+      if (!this.autoScrollDir || !this.dragSelect) {
+        return
+      }
+      this.term.scrollLines(this.autoScrollDir)
+      const touch = this.lastDragTouch
+      if (touch) {
+        const coords = this.toBufferCoords(touch.clientX, touch.clientY)
+        if (coords) {
+          this.applySelection(this.dragSelect.anchor, coords)
+        }
+      }
+      this.timers.touchAutoScroll = setTimeout(tick, AUTOSCROLL_INTERVAL)
+    }
+    this.timers.touchAutoScroll = setTimeout(tick, AUTOSCROLL_DELAY)
+  },
+
+  stopAutoScroll () {
+    this.autoScrollDir = 0
+    clearTimeout(this.timers.touchAutoScroll)
+    this.timers.touchAutoScroll = null
+  },
+
+  /**
+   * Opens the antd context-menu dropdown at the finger position by
+   * dispatching a synthetic `contextmenu` event, so the `contextMenu` trigger
+   * (and its positioning) is handled by antd exactly like a desktop
+   * right-click.
+   */
+  openContextMenuAt (clientX, clientY, target) {
+    if (!target || this.props.config.pasteWhenContextMenu) {
+      return
+    }
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY
+    })
+    target.dispatchEvent(event)
+  },
+
+  cancelLongPress () {
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+    this.touchStartPos = null
+    this.longPressFired = false
+  },
+
+  cancelTouchGesture () {
+    this.cancelLongPress()
+    this.stopAutoScroll()
+    window.cancelAnimationFrame(this.dragFrame)
+    this.dragFrame = 0
+    this.dragSelect = null
+    this.lastDragTouch = null
+  }
+}