@electerm/electerm-react 5.5.9 → 5.5.25

package/client/components/vnc/vnc-session.jsx

@@ -7,7 +7,6 @@ import {
   statusMap
 } from '../../common/constants'
 import {
-  Spin,
   Select
 } from 'antd'
 import {
@@ -18,6 +17,7 @@ import Modal from '../common/modal'
 import { copy, readClipboard } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
+import RemoteSessionShell from '../common/remote-session-shell'
 import './vnc.styl'
 
 // noVNC module imports — loaded dynamically
@@ -71,23 +71,35 @@ export default class VncSession extends PureComponent {
     })
   }
 
-  getScreenSize = () => {
-    const { screens, currentScreen } = this.state
-    const currentScreenData = screens.find(s => s.id === currentScreen)
-    return {
-      remoteWidth: currentScreenData ? currentScreenData.width : null,
-      remoteHeight: currentScreenData ? currentScreenData.height : null
+  // fullscreen always fills the screen, the per tab setting only applies
+  // windowed; the switch is not reachable in fullscreen anyway
+  getFit = () => {
+    if (this.props.fullscreen) {
+      return true
     }
+    const { scaleViewport = true } = this.props.tab
+    return !!scaleViewport
   }
 
+  // viewport box measured by the shell, used as the size hint for the server.
+  // Falls back to the layout props before the first measurement.
   calcCanvasSize = () => {
-    const { width, height } = this.props
+    const { width, height } = this.viewSize || {}
+    if (width && height) {
+      return { width, height }
+    }
+    const { width: w, height: h } = this.props
     return {
-      width: width - 10,
-      height: height - 80
+      width: w - 10,
+      height: h - 80
     }
   }
 
+  handleViewportResize = (width, height) => {
+    this.viewSize = { width, height }
+    this.updateViewLayout()
+  }
+
   buildWsUrl = (port, type = 'vnc', extra = '') => {
     const { host, tokenElecterm } = this.props.config
     const { id } = this.props.tab
@@ -127,30 +139,6 @@ export default class VncSession extends PureComponent {
     }
   }
 
-  renderControl = () => {
-    const contrlProps = this.getControlProps({
-      fixedPosition: false,
-      showExitFullscreen: false,
-      className: 'mg1l'
-    })
-    return (
-      <div className='pd1 fix session-v-info'>
-        <div className='fleft'>
-          <ReloadOutlined
-            onClick={this.handleReInit}
-            className='mg2r mg1l pointer'
-          />
-          {this.renderScreensSelect()}
-          {this.renderInfo()}
-        </div>
-        <div className='fright'>
-          {this.props.fullscreenIcon()}
-          <RemoteFloatControl {...contrlProps} />
-        </div>
-      </div>
-    )
-  }
-
   renderScreensSelect = () => {
     const {
       screens,
@@ -232,8 +220,9 @@ export default class VncSession extends PureComponent {
 
     const { width, height } = this.calcCanvasSize()
     const wsUrl = this.buildWsUrl(port, 'vnc', `&width=${width}&height=${height}`)
-    // When scaleViewport is false, we don't set fixed dimensions on the canvas
-    // so it can render at the actual remote screen size
+    // noVNC sizes its own canvas (`_screen` fills whatever box it is mounted
+    // into, the canvas is centered in it), so scaling is entirely driven by
+    // `scaleViewport` plus the size of the mount node.
     const vncOpts = {
       clipViewport,
       scaleViewport,
@@ -241,13 +230,6 @@ export default class VncSession extends PureComponent {
       qualityLevel, // JPEG quality 0-9, lower = faster
       compressionLevel, // Compression 0-9, lower = faster
       shared, // Allow shared connections
-      style: scaleViewport
-        ? {
-            width: width + 'px',
-            height: height + 'px',
-            overflow: 'hidden'
-          }
-        : {},
       credentials: {}
     }
     if (username) {
@@ -378,7 +360,7 @@ export default class VncSession extends PureComponent {
     for (const event of events) {
       rfb.addEventListener(event, this[`on${window.capitalizeFirstLetter(event)}`])
     }
-    rfb.scaleViewport = scaleViewport
+    rfb.scaleViewport = this.getFit()
     rfb.clipViewport = clipViewport
     rfb.qualityLevel = qualityLevel
     rfb.compressionLevel = compressionLevel
@@ -550,9 +532,10 @@ export default class VncSession extends PureComponent {
   }
 
   componentDidUpdate (prevProps, prevState) {
+    // viewport size changes are reported by the shell, the layout props are
+    // stale in fullscreen so they are not used here
     if (
-      prevProps.width !== this.props.width ||
-      prevProps.height !== this.props.height ||
+      prevProps.fullscreen !== this.props.fullscreen ||
       prevState.currentScreen !== this.state.currentScreen
     ) {
       this.updateViewLayout()
@@ -561,24 +544,25 @@ export default class VncSession extends PureComponent {
 
   updateViewLayout = () => {
     const { currentScreen, screens } = this.state
-    const { scaleViewport = true, clipViewport = false } = this.props.tab
+    const { clipViewport = false } = this.props.tab
     const container = this.domRef.current ? this.domRef.current.firstElementChild : null
 
     if (!this.rfb || !container) {
       return
     }
 
-    // Force re-apply scaleViewport to trigger autoscale logic (if enabled)
-    // or reset to 1.0 (if disabled)
-    this.rfb.scaleViewport = scaleViewport
+    // keep noVNC scaling in sync with our fit state, then re-run autoscale so
+    // our patched single screen logic sees the new viewport size
+    const fit = this.getFit()
+    this.rfb.scaleViewport = fit
     this.rfb.clipViewport = clipViewport
 
-    // Explicitly trigger autoscale to ensure our patched logic runs
-    if (scaleViewport && this.rfb._display) {
+    if (fit && this.rfb._display) {
       this.rfb._display.autoscale(container.clientWidth, container.clientHeight)
     }
 
     // Handle scrolling to the selected screen
+    clearTimeout(this.timer)
     this.timer = setTimeout(() => {
       if (currentScreen === 'all') {
         container.scrollTo(0, 0)
@@ -653,61 +637,45 @@ export default class VncSession extends PureComponent {
   }
 
   render () {
-    const { width: w, height: h } = this.props
     const { loading } = this.state
-    const { remoteWidth, remoteHeight } = this.getScreenSize()
-    const { scaleViewport = true } = this.props.tab
-    // When not in scale mode, we need a wrapper with container size,
-    // and the inner div should have remote screen size to show scrollbars
-    const isScaled = scaleViewport
-
-    const {
-      width: innerWidth,
-      height: innerHeight
-    } = this.calcCanvasSize()
-    const wrapperStyle = {
-      width: innerWidth + 'px',
-      height: innerHeight + 'px',
-      overflow: isScaled ? 'hidden' : 'auto'
-    }
-    const remoteStyle = {
-      width: isScaled ? '100%' : remoteWidth + 'px',
-      height: isScaled ? '100%' : remoteHeight + 'px',
-      overflow: 'hidden'
-    }
-    const divProps = {
-      style: remoteStyle,
-      className: 'vnc-session-wrap session-v-wrap'
-    }
-    const contrlProps = this.getControlProps()
-    const sessProps = {
-      className: 'vnc-session-wrap',
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
+    const floatProps = this.getControlProps()
+    const inlineProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
+    const controlLeft = (
+      <>
+        <ReloadOutlined
+          onClick={this.handleReInit}
+          className='mg2r mg1l pointer'
+        />
+        {this.renderScreensSelect()}
+        {this.renderInfo()}
+      </>
+    )
+    const controlRight = (
+      <>
+        {this.props.fullscreenIcon()}
+        <RemoteFloatControl {...inlineProps} />
+      </>
+    )
     return (
-      <Spin spinning={loading}>
+      <RemoteSessionShell
+        loading={loading}
+        fit={this.getFit()}
+        wrapClassName='vnc-session-wrap'
+        onViewportResize={this.handleViewportResize}
+        controlLeft={controlLeft}
+        controlRight={controlRight}
+        floatControl={<RemoteFloatControl {...floatProps} />}
+        overlay={this.renderConfirm()}
+      >
         <div
-          {...sessProps}
-        >
-          {this.renderControl()}
-          <RemoteFloatControl
-            {...contrlProps}
-          />
-          <div
-            style={wrapperStyle}
-            className='vnc-scroll-wrapper'
-          >
-            <div
-              {...divProps}
-              ref={this.domRef}
-            />
-          </div>
-          {this.renderConfirm()}
-        </div>
-      </Spin>
+          className='remote-session-fill vnc-session-mount'
+          ref={this.domRef}
+        />
+      </RemoteSessionShell>
     )
   }
 }

package/client/components/vnc/vnc.styl

@@ -1,17 +1,26 @@
+// VNC only styling — the session layout (control bar, viewport, fit mode)
+// lives in the shared remote session shell: common/remote-session-shell.styl
 .vnc-session-wrap
-  display: flex
-  flex-direction: column
-  justify-content: center
-  align-items: center
-  .session-v-info
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-  &.scale-viewport
-    .rdp-scroll-wrapper canvas
-      width: 100% !important
-      height: 100% !important
-      object-fit: contain
-  > div
-    background: transparent !important
+  .vnc-session-mount
+    // noVNC mounts its own screen element in here and sizes its canvas
+    // against this box, so it has to keep a definite size
+    width 100%
+    height 100%
+    // noVNC's screen element carries no class of its own: letterbox area
+    // follows the app theme instead of noVNC's own background
+    > div
+      background transparent !important
+      // scrolled when fit is off and the remote screen is bigger than
+      // the window
+      &::-webkit-scrollbar
+        width 16px
+        height 16px
+        background var(--main-darker)
+      &::-webkit-scrollbar-track
+        background var(--main-darker)
+        box-shadow inset 0 0 5px var(--main-darker)
+      &::-webkit-scrollbar-thumb
+        background var(--primary)
+        border-radius 0
+      &::-webkit-scrollbar-corner
+        background var(--main-darker)

package/client/css/mobile.styl

@@ -11,6 +11,34 @@
   .remote-monitor-bar
     position fixed
 
+  // Side panels are full-screen drawers on mobile: they start at the viewport
+  // edge (the left one covers the icon bar too, so no strip of terminal is left
+  // showing) and run to the bottom edge — footer included. On desktop the
+  // footer is reserved *beside* the panel because it holds the panel's own
+  // trigger; on mobile the drawer is dismissed from its header (✕ / the
+  // bookmark/history tabs) instead, so there is nothing to keep clear. The
+  // inline width already comes from store.leftSidePanelWidth / rightPanelWidth,
+  // which are the viewport width here.
+  // Both are on the fixed frame (the right panel explicitly: its bottom edge
+  // must not drift from the fixed footer when the visual viewport changes), and
+  // both have to outrank the footer's 200 — it comes later in the DOM, so at an
+  // equal rank it would paint over the drawer. The left drawer lives inside
+  // .sidebar, which is its own stacking context (z-index 100), so lifting the
+  // drawer alone is not enough: the whole sidebar column has to clear the
+  // footer. The right panel is a root-level child, so its own z-index suffices.
+  // The icon bar takes no extra room from this: it is 43px wide and the footer
+  // starts at 44px.
+  .sidebar
+    z-index 250
+  .sidebar-list
+    left 0
+    bottom 0
+    z-index 250
+  .right-side-panel
+    position fixed
+    bottom 0
+    z-index 250
+
   // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
   .tabs.mobile-tabs
     display flex

package/client/store/common.js

@@ -10,6 +10,7 @@ import {
   leftSidePanelWidthKey,
   leftSideBarOpenKey,
   rightSidebarWidthKey,
+  rightPanelPinnedKey,
   addPanelWidthLsKey,
   connectionMap,
   lastAiChatSessionIdKey,
@@ -42,6 +43,18 @@ export default Store => {
     window.store.setConfig(ext)
   }
 
+  // The footer info icon is a toggle: the same click opens and closes the
+  // panel, so the trigger never has to be hunted down in the panel header.
+  Store.prototype.toggleInfoPanel = action(function () {
+    const { store } = window
+    const isOpen = store.rightPanelVisible && store.rightPanelTab === 'info'
+    store.rightPanelVisible = !isOpen
+    store.rightPanelTab = 'info'
+    if (!isOpen) {
+      store.openInfoPanelAction()
+    }
+  })
+
   Store.prototype.openInfoPanel = action(function () {
     const { store } = window
     store.rightPanelVisible = true
@@ -122,7 +135,13 @@ export default Store => {
     Object.assign(window.store._termSearchOptions, update)
   }
 
+  // Both panel widths are desktop-only preferences: on mobile the panel is a
+  // full-width drawer whose width is fixed, so a drag (or any other caller)
+  // must not overwrite the desktop value that is still in localStorage.
   Store.prototype.setLeftSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(leftSidePanelWidthKey, v)
     window.store._leftSidePanelWidth = v
   }
@@ -144,9 +163,22 @@ export default Store => {
   }
 
   Store.prototype.setRightSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(rightSidebarWidthKey, v)
     window.store._rightPanelWidth = v
   }
+
+  // Persist the pin the same way the left sidebar does (sidebarPinnedKey):
+  // pinned is a durable layout preference, not a per-session toggle. It matters
+  // more here because pinned and unpinned are visibly different modes — the
+  // unpinned panel is an overlay that clears the footer, the pinned one is a
+  // full-height dock.
+  Store.prototype.setRightPanelPinned = function (v) {
+    ls.setItem(rightPanelPinnedKey, v + '')
+    window.store.rightPanelPinned = v
+  }
   Store.prototype.beforeExit = function (evt) {
     const { confirmBeforeExit } = window.store.config
     if (
@@ -286,6 +318,18 @@ export default Store => {
     }
   }
 
+  // Same toggle contract as toggleInfoPanel: the footer AI button opens and
+  // closes its own panel. The open path must go through handleOpenAIPanel so
+  // the missing-config prompt still fires; closing must not touch config.
+  Store.prototype.toggleAIPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'ai') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.handleOpenAIPanel()
+  }
+
   Store.prototype.explainWithAi = function (txt) {
     const { store } = window
     store.handleOpenAIPanel()

package/client/store/init-state.js

@@ -18,6 +18,7 @@ import {
   localAddrBookmarkLsKey,
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
+  rightPanelPinnedKey,
   addPanelWidthLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
@@ -125,7 +126,7 @@ export default () => {
     terminalInfoProps: {},
     rightPanelVisible: false,
     rightPanelTab: 'info',
-    rightPanelPinned: false,
+    rightPanelPinned: ls.getItem(rightPanelPinnedKey) === 'true',
     _rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     showAIConfigModal: false,
 

package/client/store/setting.js

@@ -111,6 +111,10 @@ export default Store => {
       })
       store.setSettingItem(settingList().find(d => d.id === settingSyncId))
       store.openSettingModal()
+      // on mobile, jump straight to the sync form instead of the menu list
+      if (store.isMobile) {
+        store.settingMobileView = 'content'
+      }
     })
   }
 

package/client/store/sidebar.js

@@ -25,7 +25,11 @@ export default Store => {
   // through this one method.
   Store.prototype.openLeftSidePanel = function (field = 'bookmarks') {
     const { store } = window
-    if (store.pinned) {
+    // A pinned panel is already open, so there is nothing to toggle — except
+    // on mobile, where pinning is not a reachable mode (no pin control) and
+    // the panel is a full-width overlay. Honouring a stale desktop pin here
+    // would leave the bookmark button dead on arrival.
+    if (store.pinned && !store.isMobile) {
       return
     }
     store.setOpenedSideBar(store.openedSideBar ? '' : field)

package/client/store/store.js

@@ -61,10 +61,15 @@ class Store {
     return window.store.innerWidth
   }
 
+  // Mobile turns a side panel into a full-screen drawer: it spans the whole
+  // viewport and its width is not user-adjustable. So the stored desktop width
+  // is ignored here, and so is the icon bar (the drawer covers it) — and the
+  // old 500px cap, which left a strip of terminal showing on windows between
+  // 500 and 600px, i.e. the top of the mobile range.
   get leftSidePanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth - store.leftSideBarWidth, 500)
+      return store.innerWidth
     }
     return store._leftSidePanelWidth
   }
@@ -78,10 +83,12 @@ class Store {
     return store._leftSideBarOpen ? sidebarWidth : 0
   }
 
+  // Same as leftSidePanelWidth: full-screen drawer on mobile, width not
+  // user-adjustable.
   get rightPanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth, 500)
+      return store.innerWidth
     }
     return store._rightPanelWidth
   }

package/package.json

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