@electerm/electerm-react 2.7.8 → 2.8.6

package/client/common/pre.js

@@ -89,26 +89,47 @@ const fs = {
   },
   open: (...args) => {
     const cb = args.pop()
-    window.fs.openCustom(...args)
+    if (window.et.isWebApp) {
+      window.fs.openCustom(...args)
+        .then((data) => cb(undefined, data))
+        .catch((err) => cb(err))
+      return
+    }
+    runGlobalAsync('fsOpen', ...args)
       .then((data) => cb(undefined, data))
       .catch((err) => cb(err))
   },
   read: (p1, arr, ...args) => {
     const cb = args.pop()
-    window.fs.readCustom(
-      p1,
-      arr.length,
-      ...args
-    )
+    if (window.et.isWebApp) {
+      window.fs.readCustom(
+        p1,
+        arr.length,
+        ...args
+      )
+        .then((data) => {
+          const { n, newArr } = data
+          const newArr1 = decodeBase64String(newArr)
+          cb(undefined, n, newArr1)
+        })
+        .catch(err => cb(err))
+      return
+    }
+    runGlobalAsync('fsRead', p1, arr.length, ...args)
       .then((data) => {
-        const { n, newArr } = data
-        const newArr1 = decodeBase64String(newArr)
-        cb(undefined, n, newArr1)
+        const { n, buffer } = data
+        cb(undefined, n, buffer)
       })
       .catch(err => cb(err))
   },
   close: (fd, cb) => {
-    window.fs.closeCustom(fd)
+    if (window.et.isWebApp) {
+      window.fs.closeCustom(fd)
+        .then((data) => cb(undefined, data))
+        .catch((err) => cb(err))
+      return
+    }
+    runGlobalAsync('fsClose', fd)
       .then((data) => cb(undefined, data))
       .catch((err) => cb(err))
   },
@@ -124,7 +145,13 @@ const fs = {
       .catch((err) => cb(err))
   },
   write: (p1, buf, cb) => {
-    window.fs.writeCustom(p1, encodeUint8Array(buf))
+    if (window.et.isWebApp) {
+      window.fs.writeCustom(p1, encodeUint8Array(buf))
+        .then((data) => cb(undefined, data))
+        .catch((err) => cb(err))
+      return
+    }
+    runGlobalAsync('fsWrite', p1, buf)
       .then((data) => cb(undefined, data))
       .catch((err) => cb(err))
   },

package/client/components/bookmark-form/config/rdp.js

@@ -31,6 +31,7 @@ const rdpConfig = {
         { ...commonFields.password, rules: [{ required: true, message: e('password') + ' required' }] },
         commonFields.description,
         { type: 'input', name: 'domain', label: () => e('domain') },
+        commonFields.proxy,
         commonFields.type
       ]
     }

package/client/components/bookmark-form/config/vnc.js

@@ -15,6 +15,9 @@ const vncConfig = {
       viewOnly: false,
       clipViewport: true,
       scaleViewport: true,
+      qualityLevel: 3, // 0-9, lower = faster performance, default 6
+      compressionLevel: 1, // 0-9, lower = faster performance, default 2
+      shared: true,
       connectionHoppings: [],
       ...getAuthTypeDefault(props)
     })
@@ -33,6 +36,8 @@ const vncConfig = {
         { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },
         { type: 'switch', name: 'clipViewport', label: () => e('clipViewport'), valuePropName: 'checked' },
         { type: 'switch', name: 'scaleViewport', label: () => e('scaleViewport'), valuePropName: 'checked' },
+        { type: 'number', name: 'qualityLevel', label: () => e('qualityLevel') + ' (0-9)', min: 0, max: 9, step: 1 },
+        { type: 'number', name: 'compressionLevel', label: () => e('compressionLevel') + ' (0-9)', min: 0, max: 9, step: 1 },
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.vnc) },
         commonFields.username,
         commonFields.password,

package/client/components/common/remote-float-control.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {
+  FullscreenExitOutlined,
+  AppstoreOutlined,
+  DesktopOutlined,
+  MoreOutlined,
+  DownOutlined
+} from '@ant-design/icons'
+import { Dropdown } from 'antd'
+import './remote-float-control.styl'
+
+const e = window.translate
+
+export default function RemoteFloatControl (props) {
+  const {
+    isFullScreen,
+    onSendCtrlAltDel,
+    screens = [],
+    onSelectScreen,
+    currentScreen,
+    fixedPosition = true,
+    showExitFullscreen = true,
+    className = ''
+  } = props
+
+  if (fixedPosition && !isFullScreen) return null
+
+  function onExitFullScreen () {
+    window.store.toggleSessFullscreen(false)
+  }
+
+  const items = []
+
+  if (showExitFullscreen && isFullScreen) {
+    items.push({
+      key: 'exit-fullscreen',
+      label: e('exitFullscreen') || 'Exit Fullscreen',
+      icon: <FullscreenExitOutlined />,
+      onClick: onExitFullScreen
+    })
+  }
+
+  if (onSendCtrlAltDel) {
+    items.push({
+      key: 'ctrl-alt-del',
+      label: 'Send Ctrl+Alt+Del',
+      icon: <AppstoreOutlined />,
+      onClick: onSendCtrlAltDel
+    })
+  }
+
+  if (screens && screens.length > 0) {
+    items.push({
+      key: 'screens',
+      label: 'Select Screen',
+      icon: <DesktopOutlined />,
+      children: screens.map(s => ({
+        key: s.id,
+        label: s.name,
+        onClick: () => onSelectScreen(s.id),
+        icon: currentScreen === s.id ? <DownOutlined /> : null
+      }))
+    })
+  }
+
+  const containerClassName = (fixedPosition ? 'remote-float-control' : 'remote-float-control-inline') + (className ? ' ' + className : '')
+  const buttonClassName = fixedPosition ? 'remote-float-btn' : 'remote-float-btn-inline'
+  const iconClassName = fixedPosition ? 'font20' : ''
+
+  return (
+    <div className={containerClassName}>
+      <Dropdown menu={{ items }} trigger={['click']}>
+        <div className={buttonClassName}>
+          <MoreOutlined className={iconClassName} />
+        </div>
+      </Dropdown>
+    </div>
+  )
+}

package/client/components/common/remote-float-control.styl

@@ -0,0 +1,28 @@
+.remote-float-control
+  position fixed
+  top 10px
+  right 10px
+  z-index 9999
+
+.remote-float-control-inline
+  display inline-block
+  position relative
+
+.remote-float-btn-inline
+  display inline
+  cursor pointer
+
+.remote-float-btn
+  padding 8px
+  background rgba(0, 0, 0, 0.5)
+  border-radius 4px
+  color #fff
+  cursor pointer
+  opacity 0.8
+  transition opacity 0.3s
+  display flex
+  align-items center
+  justify-content center
+  &:hover
+  &.ant-dropdown-open
+    opacity 1

package/client/components/layout/layout.jsx

@@ -179,7 +179,8 @@ export default auto(function Layout (props) {
       'leftSidebarWidth',
       'pinned',
       'openedSideBar',
-      'config'
+      'config',
+      'fullscreen'
     ]),
     tabs: store.tabs,
     layout

package/client/components/main/main.jsx

@@ -19,7 +19,6 @@ import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
-import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
@@ -36,6 +35,7 @@ import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
+import './term-fullscreen.styl'
 
 export default auto(function Index (props) {
   useEffect(() => {
@@ -79,7 +79,7 @@ export default auto(function Index (props) {
   const {
     configLoaded,
     config,
-    terminalFullScreen,
+    fullscreen,
     pinned,
     isSecondInstance,
     pinnedQuickCommandBar,
@@ -105,7 +105,7 @@ export default auto(function Index (props) {
     pinned,
     'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
-    'term-fullscreen': terminalFullScreen,
+    fullscreen,
     'is-main': !isSecondInstance
   })
   const ext1 = {
@@ -243,9 +243,6 @@ export default auto(function Index (props) {
       <div {...ext1}>
         <InputContextMenu />
         <ShortcutControl config={config} />
-        <TermFullscreenControl
-          terminalFullScreen={terminalFullScreen}
-        />
         <CssOverwrite
           {...confsCss}
           wsInited={wsInited}

package/client/components/main/term-fullscreen.styl

@@ -1,4 +1,4 @@
-.term-fullscreen
+.fullscreen
   .sidebar
   .tabs
   .terminal-footer
@@ -7,13 +7,6 @@
   .main-footer
   .session-v-info
     display none
-  .term-fullscreen-control
-    display block
-    right 10px
-    top 10px
-    position fixed
-    z-index 100
-    background #2df56c
   // Hide all sessions first
   .session-wrap
     display none
@@ -37,5 +30,3 @@
       top 10px !important
       right 10px !important
       bottom 10px !important
-.term-fullscreen-control
-  display none

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

@@ -17,6 +17,8 @@ import {
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
+import { readClipboardAsync } from '../../common/clipboard'
+import RemoteFloatControl from '../common/remote-float-control'
 
 const { Option } = Select
 
@@ -32,7 +34,8 @@ async function loadWasmModule () {
     DesktopSize: mod.DesktopSize,
     InputTransaction: mod.InputTransaction,
     DeviceEvent: mod.DeviceEvent,
-    Extension: mod.Extension
+    Extension: mod.Extension,
+    ClipboardData: mod.ClipboardData
   }
   await window.ironRdp.wasmInit()
   window.ironRdp.wasmSetup('info')
@@ -42,7 +45,7 @@ async function loadWasmModule () {
 export default class RdpSession extends PureComponent {
   constructor (props) {
     const id = `rdp-reso-${props.tab.host}`
-    const resObj = ls.getItemJSON(id, resolutions[0])
+    const resObj = ls.getItemJSON(id, resolutions[1])
     super(props)
     this.canvasRef = createRef()
     this.state = {
@@ -82,16 +85,27 @@ export default class RdpSession extends PureComponent {
     })
   }
 
+  buildWsUrl = (port, type = 'rdp', extra = '') => {
+    const { host, tokenElecterm } = this.props.config
+    const { id } = this.props.tab
+    if (window.et.buildWsUrl) {
+      return window.et.buildWsUrl(
+        host,
+        port,
+        tokenElecterm,
+        id,
+        type,
+        extra
+      )
+    }
+    return `ws://${host}:${port}/${type}/${id}?token=${tokenElecterm}${extra}`
+  }
+
   remoteInit = async () => {
     this.setState({
       loading: true
     })
     const { config } = this.props
-    const {
-      host,
-      tokenElecterm,
-      server = ''
-    } = config
     const { id } = this.props
     const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
@@ -127,16 +141,10 @@ export default class RdpSession extends PureComponent {
     console.debug('[RDP-CLIENT] Term created, pid=', pid, 'port=', port)
 
     // Build the WebSocket proxy address for IronRDP WASM
-    const hs = server
-      ? server.replace(/https?:\/\//, '')
-      : `${host}:${port}`
-    const pre = server.startsWith('https') ? 'wss' : 'ws'
     const { width, height } = this.state
     // IronRDP connects to the proxy address, which then proxies via RDCleanPath
-    // The WebSocket URL includes the pid and token for auth
-    const proxyAddress = `${pre}://${hs}/rdp/${pid}?token=${tokenElecterm}&width=${width}&height=${height}`
-    console.debug('[RDP-CLIENT] Proxy address:', proxyAddress)
-
+    const extra = `&width=${width}&height=${height}`
+    const proxyAddress = this.buildWsUrl(port, 'rdp', extra)
     // Load WASM module if not already loaded
     try {
       await loadWasmModule()
@@ -171,7 +179,7 @@ export default class RdpSession extends PureComponent {
       console.debug('[RDP-CLIENT] desktopSize:', width, 'x', height)
 
       const desktopSize = new window.ironRdp.DesktopSize(width, height)
-      const enableCredsspExt = new window.ironRdp.Extension('enable_credssp', false)
+      const enableCredsspExt = new window.ironRdp.Extension('enable_credssp', true)
 
       const builder = new window.ironRdp.SessionBuilder()
       builder.username(username)
@@ -183,6 +191,29 @@ export default class RdpSession extends PureComponent {
       builder.renderCanvas(canvas)
       builder.extension(enableCredsspExt)
 
+      // Clipboard callbacks
+      builder.remoteClipboardChangedCallback((clipboardData) => {
+        try {
+          if (clipboardData.isEmpty()) {
+            return
+          }
+          const items = clipboardData.items()
+          for (const item of items) {
+            if (item.mimeType() === 'text/plain') {
+              const text = item.value()
+              console.debug('[RDP-CLIENT] Received clipboard text:', text)
+              window.pre.writeClipboard(text)
+            }
+          }
+        } catch (e) {
+          console.error('[RDP-CLIENT] Clipboard error:', e)
+        }
+      })
+
+      builder.forceClipboardUpdateCallback(() => {
+        this.syncLocalToRemote()
+      })
+
       // Cursor style callback
       builder.setCursorStyleCallbackContext(canvas)
       builder.setCursorStyleCallback(function (style) {
@@ -241,6 +272,20 @@ export default class RdpSession extends PureComponent {
     return e?.message || e?.toString() || String(e)
   }
 
+  syncLocalToRemote = async () => {
+    if (!this.session) return
+    try {
+      const text = await readClipboardAsync()
+      if (text) {
+        const data = new window.ironRdp.ClipboardData()
+        data.addText('text/plain', text)
+        await this.session.onClipboardPaste(data)
+      }
+    } catch (e) {
+      console.error('[RDP-CLIENT] Local clipboard sync error:', e)
+    }
+  }
+
   onSessionEnd = () => {
     console.debug('[RDP-CLIENT] onSessionEnd called')
     this.session = null
@@ -353,6 +398,14 @@ export default class RdpSession extends PureComponent {
     }, { passive: false })
 
     canvas.addEventListener('contextmenu', (e) => e.preventDefault())
+
+    canvas.addEventListener('paste', () => {
+      this.syncLocalToRemote()
+    })
+
+    canvas.addEventListener('focus', () => {
+      this.syncLocalToRemote()
+    })
   }
 
   // Get PS/2 scancode from keyboard event code using existing code-scan module
@@ -382,7 +435,7 @@ export default class RdpSession extends PureComponent {
   getAllRes = () => {
     return [
       ...this.props.resolutions,
-      ...resolutions
+      ...resolutions.slice(1)
     ]
   }
 
@@ -397,7 +450,65 @@ export default class RdpSession extends PureComponent {
     return null
   }
 
+  getControlProps = (options = {}) => {
+    const {
+      fixedPosition = true,
+      showExitFullscreen = true,
+      className = ''
+    } = options
+
+    return {
+      isFullScreen: this.props.fullscreen,
+      onSendCtrlAltDel: this.handleSendCtrlAltDel,
+      screens: [], // RDP doesn't have multi-screen support like VNC
+      currentScreen: null,
+      onSelectScreen: () => {}, // No-op for RDP
+      fixedPosition,
+      showExitFullscreen,
+      className
+    }
+  }
+
+  handleSendCtrlAltDel = () => {
+    if (!this.session) return
+    try {
+      // Send Ctrl+Alt+Del sequence using IronRDP
+      const tx = new window.ironRdp.InputTransaction()
+
+      // Ctrl key press
+      const ctrlScancode = 0x1D // Left Ctrl scancode
+      tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(ctrlScancode))
+
+      // Alt key press
+      const altScancode = 0x38 // Left Alt scancode
+      tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(altScancode))
+
+      // Del key press
+      const delScancode = 0x53 // Delete scancode
+      tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(delScancode))
+
+      // Del key release
+      tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(delScancode))
+
+      // Alt key release
+      tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(altScancode))
+
+      // Ctrl key release
+      tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(ctrlScancode))
+
+      this.session.applyInputs(tx)
+      console.log('[RDP-CLIENT] Sent Ctrl+Alt+Del')
+    } catch (err) {
+      console.error('[RDP-CLIENT] Failed to send Ctrl+Alt+Del:', err)
+    }
+  }
+
   renderControl = () => {
+    const contrlProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
     const {
       id
     } = this.state
@@ -439,6 +550,7 @@ export default class RdpSession extends PureComponent {
         </div>
         <div className='fright'>
           {this.props.fullscreenIcon()}
+          <RemoteFloatControl {...contrlProps} />
         </div>
       </div>
     )
@@ -476,6 +588,7 @@ export default class RdpSession extends PureComponent {
       height,
       tabIndex: 0
     }
+    const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
@@ -483,6 +596,7 @@ export default class RdpSession extends PureComponent {
           className='rdp-session-wrap session-v-wrap'
         >
           {this.renderControl()}
+          <RemoteFloatControl {...controlProps} />
           <canvas
             {...canvasProps}
             ref={this.canvasRef}

package/client/components/rdp/resolutions.js

@@ -1,4 +1,10 @@
 export default [
+  {
+    id: 'res-auto',
+    width: 'auto',
+    height: 'auto',
+    readonly: true
+  },
   {
     id: 'res-1024x768',
     width: 1024,

package/client/components/session/session.jsx

@@ -283,7 +283,8 @@ export default class SessionWrapper extends Component {
           'delTab',
           'config',
           'reloadTab',
-          'editTab'
+          'editTab',
+          'fullscreen'
         ]),
         ...pick(
           this,
@@ -462,7 +463,7 @@ export default class SessionWrapper extends Component {
   handleFullscreen = () => {
     // Make this tab the active tab before fullscreening
     window.store.activeTabId = this.props.tab.id
-    window.store.toggleTermFullscreen(true, this.props.tab.id)
+    window.store.toggleSessFullscreen(true, this.props.tab.id)
   }
 
   toggleBroadcastInput = () => {
@@ -492,7 +493,7 @@ export default class SessionWrapper extends Component {
     return (
       <Tooltip title={title} placement='bottomLeft'>
         <FullscreenOutlined
-          className='mg1r icon-info iblock pointer spliter term-fullscreen-control1'
+          className='mg1r icon-info iblock pointer spliter fullscreen-control-icon'
           onClick={this.handleFullscreen}
         />
       </Tooltip>

package/client/components/session/session.styl

@@ -60,14 +60,27 @@
 .web-session-wrap
   height 100vh
   background var(--main)
-.session-v-wrap
+.session-v-info
+  line-height 30px
+.vnc-scroll-wrapper
+  position relative
   background var(--main)
-  overflow scroll
-  z-index 99
+  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)
 .vnc-session-wrap > div
   display block !important
-  width auto !important
-  height auto !important
+  overflow hidden !important
 .not-split-view > .ant-splitter-bar .ant-splitter-bar-dragger
   display none
 

package/client/components/session/sessions.jsx

@@ -75,7 +75,8 @@ export default class Sessions extends Component {
           'appPath',
           'leftSidebarWidth',
           'pinned',
-          'openedSideBar'
+          'openedSideBar',
+          'fullscreen'
         ]),
         config,
         ...pick(this, [

package/client/components/shortcuts/shortcut-control.jsx

@@ -184,9 +184,11 @@ class ShortcutControl extends React.PureComponent {
 
   togglefullscreenShortcut = throttle((e) => {
     e.stopPropagation()
-    const x = document.querySelector('.term-fullscreen-control') ||
-    document.querySelector('.session-current .term-fullscreen-control1')
-    x && x.click()
+    if (window.store.fullscreen) {
+      window.store.toggleSessFullscreen(false)
+    } else {
+      window.store.toggleSessFullscreen(true)
+    }
   }, 500)
 
   zoominShortcut = throttle((e) => {

package/client/components/shortcuts/shortcut-handler.js

@@ -176,9 +176,11 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !shiftKey &&
       ctrlKey &&
-      this.onZmodem
+      this.zmodemClient &&
+      this.zmodemClient.isActive
     ) {
-      this.onZmodemEnd()
+      this.zmodemClient.cancel()
+      return false
     }
 
     let codeName

package/client/components/terminal/attach-addon-custom.js

@@ -107,6 +107,19 @@ export default class AttachAddonCustom extends AttachAddon {
   }
 
   onMsg = (ev) => {
+    // Check if it's a JSON zmodem control message
+    if (typeof ev.data === 'string') {
+      try {
+        const msg = JSON.parse(ev.data)
+        if (msg.action === 'zmodem-event') {
+          // Let zmodem-client handle this, don't write to terminal
+          return
+        }
+      } catch (e) {
+        // Not JSON, continue processing
+      }
+    }
+
     // When in alternate screen mode (like vim, less, or TUI apps like Claude Code),
     // bypass trzsz processing to avoid interference with the application's display
     if (this.term?.buffer?.active?.type === 'alternate') {