@electerm/electerm-react 3.15.167 → 3.15.173

package/client/common/constants.js

@@ -14,9 +14,9 @@ const buildConst = (props) => {
   }, {})
 }
 
-export const logoPath1 = logoPath1Ref.replace(/^\//, '')
-export const logoPath2 = logoPath2Ref.replace(/^\//, '')
-export const logoPath3 = logoPath3Ref.replace(/^\//, '')
+export const logoPath1 = logoPath1Ref.replace(/^\//, '') + '?ver=' + packInfo.version
+export const logoPath2 = logoPath2Ref.replace(/^\//, '') + '?ver=' + packInfo.version
+export const logoPath3 = logoPath3Ref.replace(/^\//, '') + '?ver=' + packInfo.version
 export const maxEditFileSize = 1024 * 3000
 export const defaultBookmarkGroupId = 'default'
 export const newBookmarkIdPrefix = 'new-bookmark'
@@ -197,7 +197,7 @@ export const commonLineEndings = commonTxLineEndings
 
 export const maxBatchInput = 30
 export const windowControlWidth = 94
-export const mobileBreakpoint = 800
+export const mobileBreakpoint = 600
 export const baseUpdateCheckUrls = [
   packInfo.homepage,
   'https://gitee.com/github-zxdong262/electerm/raw/gh-pages'

package/client/components/session/session.jsx

@@ -677,8 +677,8 @@ export default class SessionWrapper extends Component {
                 onClick={() => this.onChangePane(types[i])}
               >
                 <span className='type-tab-txt'>
-                  <span className='w800'>{e(type)}</span>
-                  <span className='l800'>{simpleMapper[type]}</span>
+                  <span className='type-tab-full'>{e(type)}</span>
+                  <span className='type-tab-short'>{simpleMapper[type]}</span>
                   <span className='type-tab-line' />
                 </span>
               </span>

package/client/components/shortcuts/shortcuts-defaults.js

@@ -92,7 +92,7 @@ export default () => {
     },
     {
       name: 'terminal_paste',
-      shortcut: 'ctrl+shift+v',
+      shortcut: 'ctrl+v,ctrl+shift+v',
       shortcutMac: 'meta+v',
       readonly: true
     },

package/client/components/tabs/no-session.jsx

@@ -25,7 +25,7 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
     ? (
       <Button
         onClick={onNewTab}
-        className='mg1r mg1b add-new-tab-btn'
+        className='add-new-tab-btn'
       >
         {e('newTab')}
       </Button>
@@ -33,17 +33,15 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
     : null
   return (
     <div className='no-sessions electerm-logo-bg' {...props}>
-      <div className='pd1b'>
+      <div className='no-session-btns'>
         {newTabDom}
         <Button
           onClick={onNewSsh}
-          className='mg1r mg1b'
         >
           {e('newBookmark')}
         </Button>
         <Button
           onClick={handleCreateAIBookmark}
-          className='mg1r mg1b'
           icon={<RobotOutlined />}
         >
           {e('createBookmarkByAI')}

package/client/components/tabs/no-session.styl

@@ -8,6 +8,13 @@
   right 0
   bottom 0
   z-index 11
+.no-session-btns
+  display flex
+  flex-wrap wrap
+  justify-content center
+  align-items center
+  gap 8px
+  padding-bottom 8px
 .no-session-history
   position absolute
   top 320px

package/client/components/terminal/terminal.jsx

@@ -148,9 +148,14 @@ class Term extends Component {
       this.props.themeConfig,
       prevProps.themeConfig
     )
-    if (themeChanged && this.term) {
-      this.term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+    // Also detect theme ID changes. Two different themes might share the
+    // same terminal colour config but have different UI colours (--main),
+    // which means the WebGL background needs to change even though
+    // themeConfig (terminal colours) is identical.
+    const themeIdChanged = prevProps.config?.theme !== this.props.config?.theme
+    if ((themeChanged || themeIdChanged) && this.term) {
       this.registerTerminalColorQueryHandlers(this.term, this.props.themeConfig)
+      this.applyTerminalTheme(true)
     }
   }
 
@@ -163,6 +168,8 @@ class Term extends Component {
       this.term.parent = null
     }
     this.disposeTerminalColorQueryHandlers()
+    window.cancelAnimationFrame(this.timers.themeRaf)
+    this.timers.themeRaf = null
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
       this.timers[k] = null
@@ -185,6 +192,10 @@ class Term extends Component {
     this.fitAddon = null
     this.cmdAddon = null
     this.imageAddon = null
+    this.webglContextLossDisposable?.dispose?.()
+    this.webglContextLossDisposable = null
+    this.webglAddon = null
+    this.webglRecovering = false
   }
 
   terminalConfigProps = [
@@ -242,6 +253,18 @@ class Term extends Component {
       }
     }
 
+    // Handle renderer type changes (dom <-> webGL) by reloading the
+    // renderer and refreshing the theme so the background color is
+    // correct for the new renderer.
+    if (
+      prevProps.config.rendererType !== props.config.rendererType &&
+      this.term
+    ) {
+      this.reloadWebglRenderer('renderer type change')
+        .then(() => this.applyTerminalTheme())
+        .catch(e => console.error('renderer type change failed', e))
+    }
+
     // Check for shell integration related config changes
     const prevShowSuggestions = prevProps.config.showCmdSuggestions
     const currShowSuggestions = props.config.showCmdSuggestions
@@ -1127,15 +1150,59 @@ class Term extends Component {
     if (config.rendererType === rendererTypes.webGL) {
       try {
         const WebglAddon = await loadWebglAddon()
-        term.loadAddon(new WebglAddon())
+        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
+      })
+  }
+
   terminalColorQueryDisposables = []
 
   disposeTerminalColorQueryHandlers = () => {
@@ -1145,9 +1212,15 @@ class Term extends Component {
 
   getVisibleTerminalBackground = () => {
     const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
-    const dom = this.domRef.current
-    const cssMain = dom && window.getComputedStyle
-      ? window.getComputedStyle(dom).getPropertyValue('--main').trim()
+    // 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
   }
@@ -1182,6 +1255,32 @@ class Term extends Component {
     )
   }
 
+  /**
+   * 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)
+    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.term.refresh(0, this.term.rows - 1)
+      })
+    }
+  }
+
   initTerminal = async () => {
     const { themeConfig, tab = {}, config = {} } = this.props
     const tc = this.getRendererThemeConfig(themeConfig)
@@ -1205,6 +1304,14 @@ class Term extends Component {
     term.open(this.domRef.current, true)
     this.registerTerminalColorQueryHandlers(term, themeConfig)
     await this.loadRenderer(term, config)
+    // 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()

package/client/css/mobile.styl

@@ -1,15 +1,10 @@
-.l800
-  display none !important
-
-@media (max-width: 800px)
-  .w800
-    display none !important
-  .l800
-    display inline !important
+// 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: 800px (see mobileBreakpoint in constants.js)
+// Breakpoint: 600px (see mobileBreakpoint in constants.js)
 // ---------------------------------------------------------------------------
 .is-mobile
   // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
@@ -151,3 +146,9 @@
   //        matching left gap so it never extends past the screen edge.
   .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

package/package.json

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