@electerm/electerm-react 5.5.9 → 5.5.15

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

@@ -14,7 +14,6 @@ import {
   DownloadOutlined
 } from '@ant-design/icons'
 import {
-  Spin,
   Select,
   Tooltip
 } from 'antd'
@@ -23,6 +22,8 @@ import scanCode from './code-scan'
 import resolutions from './resolutions'
 import { readClipboardAsync } from '../../common/clipboard'
 import RemoteFloatControl from '../common/remote-float-control'
+import RemoteSessionShell from '../common/remote-session-shell'
+import { eventToRemotePos } from '../common/remote-pointer'
 import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
 import Modal from '../common/modal'
@@ -102,6 +103,12 @@ export default class RdpSession extends PureComponent {
 
   runInitScript = () => { }
 
+  // fullscreen always fills the screen, the per tab setting only applies
+  // windowed; the switch is not reachable in fullscreen anyway
+  getFit = () => {
+    return !!this.props.fullscreen || !!this.state.scaleViewport
+  }
+
   setStatus = status => {
     const id = this.props.tab?.id
     this.props.editTab(id, {
@@ -458,30 +465,14 @@ export default class RdpSession extends PureComponent {
     canvas.addEventListener('mousemove', (e) => {
       if (!this.session) return
       try {
-        const rect = canvas.getBoundingClientRect()
-        const { scaleViewport } = this.state
-        let scaleX = canvas.width / rect.width
-        let scaleY = canvas.height / rect.height
-        let offsetX = 0
-        let offsetY = 0
-        if (scaleViewport) {
-          const containerRatio = rect.width / rect.height
-          const canvasRatio = canvas.width / canvas.height
-          let renderWidth, renderHeight
-          if (containerRatio > canvasRatio) {
-            renderHeight = rect.height
-            renderWidth = rect.height * canvasRatio
-            offsetX = (rect.width - renderWidth) / 2
-          } else {
-            renderWidth = rect.width
-            renderHeight = rect.width / canvasRatio
-            offsetY = (rect.height - renderHeight) / 2
-          }
-          scaleX = canvas.width / renderWidth
-          scaleY = canvas.height / renderHeight
-        }
-        const x = Math.round((e.clientX - rect.left - offsetX) * scaleX)
-        const y = Math.round((e.clientY - rect.top - offsetY) * scaleY)
+        // the canvas is rendered with object-fit: contain, so the pointer has
+        // to be mapped through the real surface rect (see remote-pointer.js)
+        const { x, y } = eventToRemotePos(
+          e,
+          canvas,
+          canvas.width,
+          canvas.height
+        )
         const event = window.ironRdp.DeviceEvent.mouseMove(x, y)
         const tx = new window.ironRdp.InputTransaction()
         tx.addEvent(event)
@@ -705,12 +696,7 @@ export default class RdpSession extends PureComponent {
     this.setupInputHandlers()
   }
 
-  renderControl = () => {
-    const contrlProps = this.getControlProps({
-      fixedPosition: false,
-      showExitFullscreen: false,
-      className: 'mg1l'
-    })
+  renderControlLeft = () => {
     const {
       id,
       hasRemoteFiles,
@@ -730,61 +716,67 @@ export default class RdpSession extends PureComponent {
     const uploadTitle = window.translate('upload') || 'Upload files to remote'
     const downloadTitle = window.translate('download') || 'Download files from remote'
     return (
-      <div
-        className='pd1 fix session-v-info block'
-      >
-        <div className='fleft'>
-          <ReloadOutlined
-            onClick={this.handleReInit}
-            className='mg2r mg1l pointer'
-          />
-          <Select
-            {...sleProps}
-          >
-            {
-              this.getAllRes().map(d => {
-                const v = d.id
-                return (
-                  <Option
-                    key={v}
-                    value={v}
-                  >
-                    {d.width}x{d.height}
-                  </Option>
-                )
-              })
-            }
-          </Select>
-          <EditOutlined
-            onClick={this.handleEditResolutions}
-            className='mg2r mg1l pointer'
-          />
-          {this.renderInfo()}
-          <SwitchLabel
-            {...scaleProps}
+      <>
+        <ReloadOutlined
+          onClick={this.handleReInit}
+          className='mg2r mg1l pointer'
+        />
+        <Select
+          {...sleProps}
+        >
+          {
+            this.getAllRes().map(d => {
+              const v = d.id
+              return (
+                <Option
+                  key={v}
+                  value={v}
+                >
+                  {d.width}x{d.height}
+                </Option>
+              )
+            })
+          }
+        </Select>
+        <EditOutlined
+          onClick={this.handleEditResolutions}
+          className='mg2r mg1l pointer'
+        />
+        {this.renderInfo()}
+        <SwitchLabel
+          {...scaleProps}
+        />
+        <Tooltip title={uploadTitle}>
+          <UploadOutlined
+            onClick={this.handleUploadButtonClick}
+            className={`mg1r mg2l pointer rdp-file-transfer-btn${uploadReady ? ' rdp-download-flash' : ''}`}
           />
-          <Tooltip title={uploadTitle}>
-            <UploadOutlined
-              onClick={this.handleUploadButtonClick}
-              className={`mg1r mg2l pointer rdp-file-transfer-btn${uploadReady ? ' rdp-download-flash' : ''}`}
-            />
-          </Tooltip>
-          <Tooltip title={downloadTitle}>
-            <DownloadOutlined
-              onClick={this.handleDownloadButtonClick}
-              className={`mg2r mg1l pointer rdp-file-transfer-btn${hasRemoteFiles ? ' rdp-download-flash' : ' rdp-download-disabled'}`}
-            />
-          </Tooltip>
-          <HelpIcon
-            link='https://github.com/electerm/electerm/wiki/RDP-File-Transfer'
-            className='mg2r mg1l'
+        </Tooltip>
+        <Tooltip title={downloadTitle}>
+          <DownloadOutlined
+            onClick={this.handleDownloadButtonClick}
+            className={`mg2r mg1l pointer rdp-file-transfer-btn${hasRemoteFiles ? ' rdp-download-flash' : ' rdp-download-disabled'}`}
           />
-        </div>
-        <div className='fright'>
-          {this.props.fullscreenIcon()}
-          <RemoteFloatControl {...contrlProps} />
-        </div>
-      </div>
+        </Tooltip>
+        <HelpIcon
+          link='https://github.com/electerm/electerm/wiki/RDP-File-Transfer'
+          className='mg2r mg1l'
+        />
+      </>
+    )
+  }
+
+  renderControlRight = () => {
+    const contrlProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
+    return (
+      <>
+        {this.props.fullscreenIcon()}
+        <RemoteFloatControl {...contrlProps} />
+      </>
     )
   }
 
@@ -802,48 +794,26 @@ export default class RdpSession extends PureComponent {
   }
 
   render () {
-    const { width: w, height: h } = this.props
-    const { width, height, loading, scaleViewport } = this.state
-    const innerWidth = w - 10
-    const innerHeight = h - 80
-    const wrapperStyle = {
-      width: innerWidth + 'px',
-      height: innerHeight + 'px',
-      overflow: scaleViewport ? 'hidden' : 'auto'
-    }
-    const canvasProps = {
-      width,
-      height,
-      tabIndex: 0
-    }
-    const cls = `rdp-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
-    const sessProps = {
-      className: cls,
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
+    const { width, height, loading } = this.state
     const controlProps = this.getControlProps()
     return (
-      <Spin spinning={loading}>
-        <div
-          {...sessProps}
-        >
-          {this.renderControl()}
-          <RemoteFloatControl {...controlProps} />
-          <div
-            style={wrapperStyle}
-            className='rdp-scroll-wrapper s-scroll-wrapper'
-          >
-            <canvas
-              {...canvasProps}
-              ref={this.canvasRef}
-            />
-          </div>
-          {this.renderCredPrompt()}
-        </div>
-      </Spin>
+      <RemoteSessionShell
+        loading={loading}
+        fit={this.getFit()}
+        wrapClassName='rdp-session-wrap'
+        controlLeft={this.renderControlLeft()}
+        controlRight={this.renderControlRight()}
+        floatControl={<RemoteFloatControl {...controlProps} />}
+        overlay={this.renderCredPrompt()}
+      >
+        <canvas
+          className='rdp-canvas'
+          width={width}
+          height={height}
+          tabIndex={0}
+          ref={this.canvasRef}
+        />
+      </RemoteSessionShell>
     )
   }
 }

package/client/components/rdp/rdp.styl

@@ -1,36 +1,18 @@
+// RDP only styling — the session layout (control bar, viewport, fit mode)
+// lives in the shared remote session shell: common/remote-session-shell.styl
+
+// fit: the canvas box fills the viewport and the remote surface is letterboxed
+// inside it with object-fit: contain, so the aspect ratio is kept and the
+// letterbox keeps the app background
 .rdp-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
+  &.fit
+    .rdp-canvas
+      object-fit contain
 
-.s-scroll-wrapper
-  &::-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)
-.rdp-scroll-wrapper
-  position relative
-  background var(--main)
-  z-index 299
+// fit off: rendered at the remote desktop size, the viewport scrolls
+.rdp-canvas
+  display block
+  outline none
 
 .rdp-file-transfer-btn
   font-size: 16px
@@ -45,9 +27,6 @@
   &:hover
     color: var(--text)
 
-canvas
-  outline: none
-
 @keyframes rdp-download-flash
   0%, 100%
     color: var(--primary)
@@ -58,5 +37,3 @@ canvas
 
 .rdp-download-flash
   animation: rdp-download-flash 1s ease-in-out infinite
-
-

package/client/components/session/session.styl

@@ -71,22 +71,6 @@
   overflow hidden
 .session-v-info
   line-height 30px
-.vnc-scroll-wrapper
-  position relative
-  background var(--main)
-  z-index 299
-  &::-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)
 
 .not-split-view > .ant-splitter-bar .ant-splitter-bar-dragger
   display none

package/client/components/setting-panel/setting-modal.jsx

@@ -4,10 +4,11 @@
 
 import { auto } from 'manate/react'
 import { pick } from 'lodash-es'
-import { Tabs, Spin } from 'antd'
+import { Spin } from 'antd'
 import { lazy, Suspense } from 'react'
 import SettingModal from './setting-wrap'
 import LazyBoundary from '../common/lazy-boundary'
+import ResponsiveTabs from '../common/responsive-tabs'
 import {
   settingMap,
   modals,
@@ -132,11 +133,15 @@ export default auto(function SettingModalWrap (props) {
       onChange: store.handleChangeSettingTab,
       destroyOnHidden: true,
       className: 'setting-tabs',
-      type: 'card'
+      type: 'card',
+      // the panel turns into a phone style drill-down at 800px (same
+      // breakpoint as the media query in setting-wrap.styl), collapse the tab
+      // bar there too instead of letting antd hide the overflow tabs
+      isMobile: store.innerWidth <= settingPanelMobileBreakpoint
     }
     return (
       <>
-        <Tabs
+        <ResponsiveTabs
           {...tabsProps}
         />
         <LazyBoundary>

package/client/components/sftp/sftp-entry.jsx

@@ -293,11 +293,29 @@ export default class Sftp extends Component {
       if (!path && this.sftp) {
         path = await this.getPwd(this.props.tab.username)
       }
+      if (!path) {
+        // No sftp connection yet (still connecting, or the previous attempt
+        // failed). There is no remote home to resolve, and navigating to an
+        // unknown path would blank the panel, so (re)start the connection and
+        // let its own listing decide the path.
+        if (
+          !this.sftp &&
+          !this.state.loadingSftp &&
+          !this.state.remoteLoading
+        ) {
+          this.initData(this.terminalId, this.port)
+        }
+        return
+      }
       path = normalizeRemotePath(path)
     } else {
       path = this.getLocalHome()
     }
 
+    if (typeof path !== 'string' || !path) {
+      return
+    }
+
     this.setState({
       [n]: path,
       [nt]: path
@@ -1033,6 +1051,9 @@ export default class Sftp extends Component {
   goParent = (type) => {
     const n = `${type}Path`
     const p = this.state[n]
+    if (typeof p !== 'string' || !p) {
+      return
+    }
     let np = resolve(p, '..')
     if (type === typeMap.remote) {
       np = normalizeRemotePath(np)
@@ -1136,6 +1157,11 @@ export default class Sftp extends Component {
 
   renderParentItem = (type) => {
     const currentPath = this.state[`${type}Path`]
+    // The path can be momentarily unknown (e.g. the remote home while the sftp
+    // client is still connecting). Show no parent item rather than throwing.
+    if (typeof currentPath !== 'string') {
+      return null
+    }
     const parentPath = resolve(currentPath, '..')
     // Don't render parent item if we're at the root
     if (parentPath === currentPath) {

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

@@ -9,11 +9,10 @@ import {
 import {
   ReloadOutlined
 } from '@ant-design/icons'
-import {
-  Spin
-} from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import RemoteSessionShell from '../common/remote-session-shell'
+import { eventToRemotePos } from '../common/remote-pointer'
 import SwitchLabel from '../common/switch'
 import './spice.styl'
 
@@ -53,24 +52,19 @@ export default class SpiceSession extends PureComponent {
   }
 
   // The spice client sends event.offsetX/offsetY to the remote as-is, but when
-  // the canvas is CSS-scaled (scaleViewport or the lib's maxWidth/maxHeight),
-  // those are display pixels instead of remote surface pixels. On high
-  // resolution remote screens the pointer then only reaches the top-left
-  // region. Convert display coords to surface coords (the canvas box is
-  // letterboxed by object-fit: contain) before the lib's handlers run.
+  // the canvas is CSS-scaled (fit mode), those are display pixels instead of
+  // remote surface pixels. On high resolution remote screens the pointer then
+  // only reaches the top-left region. Convert display coords to surface coords
+  // before the lib's handlers run (same mapping as rdp, see remote-pointer.js).
   handleMouseScaleFix = (e) => {
     const canvas = this.domRef.current?.querySelector('canvas')
     if (!canvas || !canvas.width || !canvas.height) return
-    const rect = canvas.getBoundingClientRect()
-    if (!rect.width || !rect.height) return
-    const scale = Math.min(rect.width / canvas.width, rect.height / canvas.height)
-    const x = (e.clientX - rect.left - (rect.width - canvas.width * scale) / 2) / scale
-    const y = (e.clientY - rect.top - (rect.height - canvas.height * scale) / 2) / scale
+    const { x, y } = eventToRemotePos(e, canvas, canvas.width, canvas.height)
     Object.defineProperty(e, 'offsetX', {
-      value: Math.max(0, Math.min(x, canvas.width - 1))
+      value: x
     })
     Object.defineProperty(e, 'offsetY', {
-      value: Math.max(0, Math.min(y, canvas.height - 1))
+      value: y
     })
   }
 
@@ -123,13 +117,30 @@ export default class SpiceSession extends PureComponent {
   }
 
   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
     }
   }
 
+  // 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
+    }
+    return !!this.state.scaleViewport
+  }
+
+  handleViewportResize = (width, height) => {
+    this.viewSize = { width, height }
+  }
+
   handleSendCtrlAltDel = () => {
     if (this.spiceConn && window.spiceHtml5?.sendCtrlAltDel) {
       window.spiceHtml5.sendCtrlAltDel(this.spiceConn)
@@ -163,12 +174,7 @@ export default class SpiceSession extends PureComponent {
     }
   }
 
-  renderControl = () => {
-    const contrlProps = this.getControlProps({
-      fixedPosition: false,
-      showExitFullscreen: false,
-      className: 'mg1l'
-    })
+  renderControlLeft = () => {
     const scaleProps = {
       checked: this.state.scaleViewport,
       onChange: this.handleScaleViewChange,
@@ -176,22 +182,30 @@ export default class SpiceSession extends PureComponent {
       className: 'mg1l'
     }
     return (
-      <div className='pd1 fix session-v-info'>
-        <div className='fleft'>
-          <ReloadOutlined
-            onClick={this.handleReInit}
-            className='mg2r mg1l pointer'
-          />
-          {this.renderInfo()}
-          <SwitchLabel
-            {...scaleProps}
-          />
-        </div>
-        <div className='fright'>
-          {this.props.fullscreenIcon()}
-          <RemoteFloatControl {...contrlProps} />
-        </div>
-      </div>
+      <>
+        <ReloadOutlined
+          onClick={this.handleReInit}
+          className='mg2r mg1l pointer'
+        />
+        {this.renderInfo()}
+        <SwitchLabel
+          {...scaleProps}
+        />
+      </>
+    )
+  }
+
+  renderControlRight = () => {
+    const contrlProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
+    return (
+      <>
+        {this.props.fullscreenIcon()}
+        <RemoteFloatControl {...contrlProps} />
+      </>
     )
   }
 
@@ -298,41 +312,24 @@ export default class SpiceSession extends PureComponent {
   }
 
   render () {
-    const { width: w, height: h } = this.props
-    const { loading, scaleViewport } = this.state
-    const { width: innerWidth, height: innerHeight } = this.calcCanvasSize()
-    const wrapperStyle = {
-      width: innerWidth + 'px',
-      height: innerHeight + 'px',
-      overflow: scaleViewport ? 'hidden' : 'auto'
-    }
-    const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
+    const { loading } = this.state
     const contrlProps = this.getControlProps()
-    const sessProps = {
-      className: cls,
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
     return (
-      <Spin spinning={loading}>
+      <RemoteSessionShell
+        loading={loading}
+        fit={this.getFit()}
+        wrapClassName='spice-session-wrap'
+        onViewportResize={this.handleViewportResize}
+        controlLeft={this.renderControlLeft()}
+        controlRight={this.renderControlRight()}
+        floatControl={<RemoteFloatControl {...contrlProps} />}
+      >
         <div
-          {...sessProps}
-        >
-          {this.renderControl()}
-          <RemoteFloatControl {...contrlProps} />
-          <div
-            style={wrapperStyle}
-            className='spice-scroll-wrapper s-scroll-wrapper'
-          >
-            <div
-              ref={this.domRef}
-              id={this.screenId}
-            />
-          </div>
-        </div>
-      </Spin>
+          className='spice-session-mount'
+          id={this.screenId}
+          ref={this.domRef}
+        />
+      </RemoteSessionShell>
     )
   }
 }

package/client/components/spice/spice.styl

@@ -1,29 +1,20 @@
+// SPICE only styling — the session layout (control bar, viewport, fit mode)
+// lives in the shared remote session shell: common/remote-session-shell.styl
 .spice-session-wrap
-  display: flex
-  flex-direction: column
-  align-items: center
-  .session-v-info
-    position: relative
-    width: 100%
-    z-index: 300
-  &.scale-viewport
-    .spice-scroll-wrapper
+  // fit: the mount box fills the viewport and the canvas (sized by the spice
+  // client to the remote resolution) is scaled to it, keeping the ratio.
+  // !important because the client writes the surface size into the mount box
+  // inline style (`screen_id` height = surface height).
+  &.fit
+    .spice-session-mount
+      width 100% !important
+      height 100% !important
       display flex
       align-items center
       justify-content center
-      > div
-        width 100% !important
-        height 100% !important
-        display flex
-        align-items center
-        justify-content center
       canvas
         width 100% !important
         height 100% !important
         max-width 100% !important
         max-height 100% !important
         object-fit contain
-.spice-scroll-wrapper
-  position relative
-  background var(--main)
-  z-index 299