@electerm/electerm-react 5.3.26 → 5.5.9

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

@@ -0,0 +1,122 @@
+import {
+  loadTerminal,
+  loadFitAddon,
+  loadSerializeAddon,
+  loadSearchAddon,
+  loadLigaturesAddon,
+  loadUnicode11Addon,
+  loadImageAddon
+} from '../xterm-loader.js'
+import { CommandTrackerAddon } from '../command-tracker-addon.js'
+import { Osc52Addon } from '../osc52-addon.js'
+import { rendererTypes } from '../../../common/constants.js'
+import { refsStatic } from '../../common/ref.js'
+import keyControlPressed from '../../../common/key-control-pressed.js'
+
+/**
+ * Terminal bootstrap: create the xterm instance, load every addon and wire
+ * the handlers that must exist before the connection is opened. Connection
+ * setup continues in `socketMixin.remoteInit`.
+ */
+export const initMixin = {
+  async initTerminal () {
+    const { themeConfig, tab = {}, config = {} } = this.props
+    const tc = this.getRendererThemeConfig(themeConfig)
+    const Terminal = await loadTerminal()
+    const term = new Terminal({
+      allowProposedApi: true,
+      scrollback: config.scrollback,
+      rightClickSelectsWord: config.rightClickSelectsWord || false,
+      fontFamily: tab.fontFamily || config.fontFamily,
+      theme: tc,
+      allowTransparency: true,
+      wordSeparator: config.terminalWordSeparator,
+      cursorStyle: config.cursorStyle,
+      cursorBlink: config.cursorBlink,
+      fontSize: tab.fontSize || config.fontSize,
+      screenReaderMode: config.screenReaderMode
+    })
+
+    term.parent = this
+    term.onSelectionChange(this.onSelection)
+    term.open(this.domRef.current, true)
+    this.registerTerminalColorQueryHandlers(term, themeConfig)
+    await this.loadRenderer(term, config)
+    this.fixSelectionColors(term)
+    // Re-apply the theme after the renderer is loaded. The Terminal was
+    // constructed before UiTheme's useEffect ran, so the initial theme
+    // may have a stale background. Pass `term` directly because this.term
+    // is not assigned yet. Use deferred=true so a second repaint picks up
+    // any CSS --main changes applied by UiTheme's useEffect.
+    if (config.rendererType === rendererTypes.webGL) {
+      this.applyTerminalTheme(true, term)
+    }
+
+    const FitAddon = await loadFitAddon()
+    this.fitAddon = new FitAddon()
+    this.cmdAddon = new CommandTrackerAddon()
+    const SerializeAddon = await loadSerializeAddon()
+    this.serializeAddon = new SerializeAddon()
+    this.cmdAddon.onCommandExecuted((cmd) => {
+      if (cmd && cmd.trim()) {
+        window.store.addCmdHistory(cmd.trim())
+      }
+    })
+    this.cmdAddon.onCwdChanged((cwd) => {
+      this.setCwd(cwd)
+    })
+    const SearchAddon = await loadSearchAddon()
+    this.searchAddon = new SearchAddon()
+    const LigaturesAddon = await loadLigaturesAddon()
+    const ligtureAddon = new LigaturesAddon()
+    this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
+    const Unicode11Addon = await loadUnicode11Addon()
+    const unicode11Addon = new Unicode11Addon()
+    term.loadAddon(unicode11Addon)
+    term.loadAddon(ligtureAddon)
+    term.unicode.activeVersion = '11'
+    term.loadAddon(this.fitAddon)
+    term.loadAddon(this.searchAddon)
+    term.loadAddon(this.cmdAddon)
+    term.loadAddon(this.serializeAddon)
+    this.osc52Addon = new Osc52Addon()
+    term.loadAddon(this.osc52Addon)
+    if (tab.enableTerminalImage) {
+      const ImageAddon = await loadImageAddon()
+      this.imageAddon = new ImageAddon({
+        pixelLimit: 33554432
+      })
+      term.loadAddon(this.imageAddon)
+    }
+    term.onData(this.onData)
+    this.term = term
+    term.onSelectionChange(this.onSelectionChange)
+    term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
+    // 容器不可见（隐藏标签 display:none）时不 fit，避免算出 0 列把 shell
+    // 提示符逐字符错误换行；待标签激活可见后由 fitAndRefresh 重新适配。
+    if (this.isElementVisible()) {
+      this.fitAddon.fit()
+    }
+    await this.restoreReloadScreen(term)
+    await this.remoteInit(term)
+  },
+
+  onSelectionChange () {
+    const hasSelection = this.term.hasSelection()
+    const txt = hasSelection ? this.term.getSelection().trim() : ''
+    this.setState({ hasSelection })
+    refsStatic.get('unix-timestamp-tooltip')?.onSelection(txt)
+  },
+
+  webLinkHandler (event, url) {
+    if (event?.button === 2) {
+      return false
+    }
+    if (!this.props.config.ctrlOrMetaOpenTerminalLink) {
+      return window.openLink(url, '_blank')
+    }
+    if (keyControlPressed(event)) {
+      window.openLink(url, '_blank')
+    }
+  }
+}

package/client/components/terminal/mixins/term-log.jsx

@@ -0,0 +1,96 @@
+import { pick } from 'lodash-es'
+import { notification } from '../../common/notification'
+import ShowItem from '../../common/show-item.jsx'
+import { refs } from '../../common/ref.js'
+import { startTerminalLogFile, toggleTerminalLog } from '../terminal-apis.js'
+import { getFolderFromFilePath } from '../../sftp/file-read.js'
+
+const e = window.translate
+
+/**
+ * Session logging / recording: dumping the buffer to disk and keeping the
+ * timestamped log file running.
+ */
+export const logMixin = {
+  syncTermInfo (stateUpdate) {
+    this.setState(stateUpdate)
+    const infoUpdate = pick(stateUpdate, ['saveTerminalLogToFile', 'addTimeStampToTermLog', 'logPath', 'logFileName'])
+    if (Object.keys(infoUpdate).length) {
+      refs.get('term-info-' + this.props.tab.id)?.setState(infoUpdate)
+    }
+  },
+
+  async openLogSaveDialog (titleKey) {
+    const { logName } = this.props
+    const result = await window.api.saveDialog({
+      title: e(titleKey),
+      defaultPath: logName + '.log',
+      filters: [
+        { name: 'Log files', extensions: ['log'] }
+      ],
+      properties: ['createDirectory', 'showOverwriteConfirmation']
+    })
+    if (result.canceled || !result.filePath) {
+      return null
+    }
+    return result.filePath
+  },
+
+  async onSaveTerminalLog () {
+    const filePath = await this.openLogSaveDialog('saveTerminalLogToFile')
+    if (!filePath) {
+      return
+    }
+    const content = this.getTerminalBufferText()
+    await window.fs.writeFile(filePath, content).catch(window.store.onError)
+    const { addTimeStampToTermLog } = this.state
+    startTerminalLogFile(this.pid, filePath, addTimeStampToTermLog).catch(window.store.onError)
+    const { path: logPath, name: logFileName } = getFolderFromFilePath(filePath, false)
+    this.syncTermInfo({ saveTerminalLogToFile: true, logPath, logFileName })
+    notification.success({
+      message: e('saveTerminalLogToFile'),
+      description: <ShowItem to={filePath}>{filePath}</ShowItem>,
+      duration: 5
+    })
+  },
+
+  async onRecord () {
+    const filePath = await this.openLogSaveDialog('record')
+    if (!filePath) {
+      return
+    }
+    const { addTimeStampToTermLog } = this.state
+    startTerminalLogFile(this.pid, filePath, addTimeStampToTermLog).catch(window.store.onError)
+    const { path: logPath, name: logFileName } = getFolderFromFilePath(filePath, false)
+    this.syncTermInfo({ saveTerminalLogToFile: true, logPath, logFileName })
+    this.setState({ recording: true, recordingFilePath: filePath })
+    notification.success({
+      message: e('record'),
+      description: <ShowItem to={filePath}>{filePath}</ShowItem>,
+      duration: 5
+    })
+  },
+
+  onStopRecord () {
+    const { recordingFilePath } = this.state
+    toggleTerminalLog(this.pid).catch(window.store.onError)
+    this.syncTermInfo({ saveTerminalLogToFile: false })
+    this.setState({ recording: false, recordingFilePath: '' })
+    notification.success({
+      message: e('stopRecord'),
+      description: <ShowItem to={recordingFilePath}>{recordingFilePath}</ShowItem>
+    })
+  },
+
+  handleShowInfo () {
+    const { logName, tab } = this.props
+    const infoProps = {
+      logName,
+      id: tab.id,
+      pid: tab.id,
+      isRemote: this.isRemote(),
+      isActive: this.isActiveTerminal()
+    }
+    Object.assign(window.store.terminalInfoProps, infoProps)
+  }
+}

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

@@ -0,0 +1,87 @@
+import { throttle } from 'lodash-es'
+import { resizeTerm } from '../terminal-apis.js'
+import { minTerminalFontSize } from '../../../common/constants.js'
+
+/**
+ * Sizing: fitting the terminal into its (possibly hidden) container, font
+ * zoom, and keeping the remote pty in sync with the on-screen size.
+ */
+export const resizeMixin = {
+  // 判断终端挂载容器当前是否真实可见（非 display:none）。
+  // 隐藏标签的 clientWidth/clientHeight 为 0，此时不应 fit，否则会算出 0 列。
+  isElementVisible () {
+    const el = this.domRef.current
+    if (!el) {
+      return false
+    }
+    return el.clientWidth > 0 && el.clientHeight > 0
+  },
+
+  // 重新适配终端尺寸并强制重绘可见区域。
+  // 仅当容器真正可见时才 fit：隐藏标签(display:none)下 clientWidth 为 0，
+  // 若在此时 fit 会算出 0/极小列数，使 shell 提示符被逐字符错误换行，
+  // 出现快速连续打开多个连接时的虚假/重复提示符。因此隐藏态跳过 fit，
+  // 保留 xterm 默认 80x24，待标签激活可见后再 fit 重绘，从根上避免换行损坏。
+  fitAndRefresh () {
+    if (!this.term || !this.fitAddon || this.onClose) {
+      return
+    }
+    if (!this.isElementVisible()) {
+      return
+    }
+    try {
+      this.fitAddon.fit()
+      this.term.refresh(0, this.term.rows - 1)
+    } catch (e) {
+      console.info('resize failed', e)
+    }
+  },
+
+  // One throttled runner per terminal: a module level one would let tabs
+  // throttle each other.
+  onResize () {
+    if (!this._resizeThrottled) {
+      this._resizeThrottled = throttle(() => this.fitAndRefresh(), 200)
+    }
+    this._resizeThrottled()
+  },
+
+  onResizeTerminal (size) {
+    const { cols, rows } = size
+    resizeTerm(this.pid, cols, rows)
+  },
+
+  zoom (v) {
+    const { term } = this
+    if (!term) {
+      return
+    }
+    const next = Math.max(
+      minTerminalFontSize,
+      term.options.fontSize + v
+    )
+    const changed = next - term.options.fontSize
+    if (changed === 0) {
+      return
+    }
+    term.options.fontSize = next
+    window.store.triggerResize()
+    if (this.originalFontSize == null) {
+      this.originalFontSize = next - changed
+    }
+    this.setState({
+      fontSizeChanged: next !== this.originalFontSize
+    })
+  },
+
+  handleResetFontSize () {
+    const { term } = this
+    if (!term || this.originalFontSize == null) {
+      return
+    }
+    term.options.fontSize = this.originalFontSize
+    window.store.triggerResize()
+    this.setState({ fontSizeChanged: false })
+    term.focus()
+  }
+}