@electerm/electerm-react 5.5.9 → 5.5.25

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/list.jsx

@@ -9,7 +9,7 @@ import createName, { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
 import { noop } from 'lodash-es'
 import highlight from '../common/highlight'
-import { settingSyncId, settingCommonId, staticNewItemTabs } from '../../common/constants'
+import { staticNewItemTabs, undeletableIds } from '../../common/constants'
 import getInitItem from '../../common/init-setting-item'
 
 const e = window.translate
@@ -64,7 +64,7 @@ export default class ItemList extends React.PureComponent {
   }
 
   renderDelBtn = item => {
-    if (!item.id || [settingSyncId, settingCommonId].includes(item.id) || item.id.startsWith('default')) {
+    if (!item.id || undeletableIds.has(item.id)) {
       return null
     }
     const { shouldConfirmDel } = this.props

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/side-panel-r/right-side-panel.styl

@@ -2,13 +2,23 @@
   position absolute
   right 0
   top 36px
-  bottom 0
+  // Unpinned is an overlay, so stop above the footer: the footer is app chrome
+  // and holds the very icon that toggles this panel, so a full-height overlay
+  // would bury its own trigger. 36px is footerHeight (common/constants.js).
+  // Two cases move or remove the footer, and are handled where their sibling
+  // rules already live — see shortcut-bar.styl (.shortcut-bar-on lifts the
+  // footer) and term-fullscreen.styl (rdp/vnc/spice fullscreen hides it).
+  bottom 36px
   z-index 200
   background var(--main)
   color var(--text)
   border-left 1px solid var(--main-darker)
+  // Pinned is a dock, not an overlay: it owns the whole right column, top to
+  // bottom. The layout squeezes the terminal out of the way instead
+  // (layout.jsx reserves rightPanelWidth), so covering the footer is intended.
   &.right-side-panel-pinned
     top 0
+    bottom 0
 
   .drag-handle
     left 0

package/client/components/side-panel-r/side-panel-r.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from 'react'
+import React, { memo, useRef, useEffect } from 'react'
 import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
@@ -19,14 +19,44 @@ export default memo(function RightSidePanel (
     rightPanelWidth,
     children,
     title,
-    rightPanelTab
+    rightPanelTab,
+    isMobile
   }
 ) {
   const panelRef = useRef(null)
 
+  // Esc closes the panel, but never at the terminal's expense: xterm forwards
+  // Esc to the remote shell, so stealing it there would break vim, less, etc.
+  // The guard checks the event target rather than focus state, because the
+  // keydown bubbles up from xterm's textarea inside .term-wrap — the same
+  // selector shortcut-bar-entry.jsx uses to detect terminal focus. A modal owns
+  // Esc while one is open. This hook has to stay above the early return below
+  // so the hook order never changes.
+  useEffect(() => {
+    if (!rightPanelVisible) {
+      return
+    }
+    function onKeyDown (event) {
+      if (event.key !== 'Escape' || window.store.showModal) {
+        return
+      }
+      const { target } = event
+      if (target && typeof target.closest === 'function' && target.closest('.term-wrap')) {
+        return
+      }
+      window.store.rightPanelVisible = false
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [rightPanelVisible])
+
   if (!rightPanelVisible) {
     return null
   }
+  // Mobile has no pin control (it is not rendered below), so a pin persisted
+  // from a desktop session must not turn the panel into a dock here — that
+  // would make it full height over the footer for no reachable reason.
+  const pinned = rightPanelPinned && !isMobile
   const tag = rightPanelTab === 'ai'
     ? <Tag className='mg1r'>AI</Tag>
     : <BarChartOutlined className='mg1r' />
@@ -46,11 +76,11 @@ export default memo(function RightSidePanel (
   }
 
   function togglePin () {
-    window.store.rightPanelPinned = !window.store.rightPanelPinned
+    window.store.setRightPanelPinned(!window.store.rightPanelPinned)
   }
 
   const panelProps = {
-    className: 'right-side-panel animate-fast' + (rightPanelPinned ? ' right-side-panel-pinned' : ''),
+    className: 'right-side-panel animate-fast' + (pinned ? ' right-side-panel-pinned' : ''),
     ref: panelRef,
     style: {
       width: `${rightPanelWidth}px`
@@ -58,7 +88,7 @@ export default memo(function RightSidePanel (
   }
 
   const pinProps = {
-    className: 'right-side-panel-pin right-side-panel-controls' + (rightPanelPinned ? ' pinned' : ''),
+    className: 'right-side-panel-pin right-side-panel-controls' + (pinned ? ' pinned' : ''),
     onClick: togglePin
   }
   const dragProps = {
@@ -73,7 +103,11 @@ export default memo(function RightSidePanel (
     <div
       {...panelProps}
     >
-      <DragHandle {...dragProps} />
+      {/* Mobile panels are full-screen drawers (see store.rightPanelWidth):
+          their width is the viewport and is not adjustable, so the resize
+          handle is not rendered — it would otherwise sit on the screen's left
+          edge and drag a size the panel never uses. */}
+      {!isMobile && <DragHandle {...dragProps} />}
       <Flex
         className='right-panel-title pd2'
         justify='space-between'
@@ -83,9 +117,11 @@ export default memo(function RightSidePanel (
           {tag} {title}
         </Typography.Text>
         <Flex>
-          <PushpinOutlined
-            {...pinProps}
-          />
+          {!isMobile && (
+            <PushpinOutlined
+              {...pinProps}
+            />
+          )}
           <CloseCircleOutlined
             className='right-side-panel-close right-side-panel-controls mg1l'
             onClick={onClose}

package/client/components/sidebar/bookmark-select.jsx

@@ -20,7 +20,9 @@ export default auto(function BookmarkSelect (props) {
     return null
   }
   const onClickItem = (item) => {
-    if (!store.pinned) {
+    // A pinned (docked) panel stays open; anything else — including mobile,
+    // where pinning is not a reachable mode — dismisses on selection.
+    if (!(store.pinned && !store.isMobile)) {
       store.setOpenedSideBar('')
     }
     store.onSelectBookmark(item.id)

package/client/components/sidebar/index.jsx

@@ -43,17 +43,24 @@ export default function Sidebar (props) {
     openWidgetsModal,
     zoom,
     leftSideBarIcons,
-    widgetInstancesLength
+    widgetInstancesLength,
+    isMobile
   } = props
 
   const { store } = window
 
+  // pinned is desktop-only, like the right panel's: on mobile the panel spans
+  // the viewport and there is no pin control to unpin it, so a pin persisted
+  // from a desktop session must not turn into a mode the user cannot leave.
+  const pinnedActive = pinned && !isMobile
+
   const handleClickOutside = (event) => {
     const { store } = window
     // Nothing to dismiss when the panel is closed or pinned; also ignore
     // clicks while typing in an input so the panel is not yanked away
-    // mid-interaction.
-    if (!store.openedSideBar || store.pinned || hasActiveInput()) {
+    // mid-interaction. Read the pin live rather than from the render scope:
+    // this listener is attached once, so a captured value would go stale.
+    if (!store.openedSideBar || (store.pinned && !store.isMobile) || hasActiveInput()) {
       return
     }
     const target = event.target
@@ -221,10 +228,12 @@ export default function Sidebar (props) {
         setLeftSidePanelWidth={setLeftSidePanelWidth}
         leftSidePanelWidth={leftSidePanelWidth}
         leftSideBarWidth={leftSideBarWidth}
+        isMobile={isMobile}
       >
         <SideBarPanel
-          pinned={pinned}
+          pinned={pinnedActive}
           sidebarPanelTab={sidebarPanelTab}
+          isMobile={isMobile}
         />
       </SidePanel>
     </div>

package/client/components/sidebar/side-panel.jsx

@@ -26,15 +26,20 @@ export default function SidePanel (props) {
     onDragMove,
     left: true
   }
+  // Mobile panels are full-screen drawers: the width is the viewport and is not
+  // adjustable, so the resize handle is not rendered at all — a handle there
+  // would sit on the screen edge and drag a size the panel does not use (see
+  // store.leftSidePanelWidth, which ignores the stored width on mobile).
+  const dragHandle = props.isMobile
+    ? null
+    : <DragHandle {...dragProps} />
   return (
     <div
       {...props.sideProps}
       ref={panelRef}
       draggable={false}
     >
-      <DragHandle
-        {...dragProps}
-      />
+      {dragHandle}
       {props.children}
     </div>
   )