@electerm/electerm-react 2.7.8 → 2.8.6

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

@@ -1,5 +1,4 @@
-import { createRef } from 'react'
-import RdpSession from '../rdp/rdp-session'
+import { PureComponent, createRef } from 'react'
 import { createTerm } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
@@ -9,30 +8,41 @@ import {
 } from '../../common/constants'
 import {
   Spin,
-  Tag
+  Select
 } from 'antd'
+import {
+  ReloadOutlined
+} from '@ant-design/icons'
 import message from '../common/message'
 import Modal from '../common/modal'
-import * as ls from '../../common/safe-local-storage'
 import { copy } from '../../common/clipboard'
-import resolutions from '../rdp/resolutions'
-import RFB from '@novnc/novnc/core/rfb'
 import VncForm from './vnc-form'
+import RemoteFloatControl from '../common/remote-float-control'
+
+// noVNC module imports — loaded dynamically
+async function loadVncModule () {
+  if (window.novnc) return
+  console.debug('[VNC-CLIENT] Loading noVNC module...')
+  const mod = await import('@novnc/novnc/core/rfb')
+  window.novnc = {
+    RFB: mod.default
+  }
+  console.debug('[VNC-CLIENT] noVNC module loaded')
+}
 
+const { Option } = Select
 const e = window.translate
 
-export default class VncSession extends RdpSession {
+export default class VncSession extends PureComponent {
   constructor (props) {
-    const id = `vnc-reso-${props.tab.host}`
-    const resObj = ls.getItemJSON(id, resolutions[0])
     super(props)
     this.state = {
       types: [],
       showConfirm: false,
       loading: false,
-      aspectRatio: 4 / 3,
       name: '',
-      ...resObj
+      screens: [],
+      currentScreen: '0'
     }
   }
 
@@ -45,33 +55,125 @@ export default class VncSession extends RdpSession {
   componentWillUnmount () {
     this.rfb && this.rfb.disconnect()
     delete this.rfb
+    clearTimeout(this.timer)
+  }
+
+  setStatus = status => {
+    const id = this.props.tab?.id
+    this.props.editTab(id, {
+      status
+    })
+  }
+
+  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
+    }
+  }
+
+  calcCanvasSize = () => {
+    const { width, height } = this.props
+    return {
+      width: width - 10,
+      height: height - 80
+    }
+  }
+
+  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}`
+  }
+
+  getControlProps = (options = {}) => {
+    const {
+      screens,
+      currentScreen
+    } = this.state
+    const {
+      fixedPosition = true,
+      showExitFullscreen = true,
+      className = ''
+    } = options
+
+    return {
+      isFullScreen: this.props.fullscreen,
+      onSendCtrlAltDel: this.handleSendCtrlAltDel,
+      screens: screens.length > 1 ? screens : [],
+      currentScreen,
+      onSelectScreen: this.handleSelectScreen,
+      fixedPosition,
+      showExitFullscreen,
+      className
+    }
+  }
+
+  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>
+    )
   }
 
-  // computeProps = () => {
-  //   const {
-  //     height,
-  //     width,
-  //     tabsHeight,
-  //     leftSidebarWidth,
-  //     pinned,
-  //     openedSideBar
-  //   } = this.props
-  //   return {
-  //     width: width - (pinned && openedSideBar ? leftSidebarWidth : 0),
-  //     height: height - tabsHeight
-  //   }
-  // }
+  renderScreensSelect = () => {
+    const {
+      screens,
+      currentScreen
+    } = this.state
+    if (screens.length <= 1) {
+      return null
+    }
+    return (
+      <Select
+        value={currentScreen}
+        onChange={this.handleSelectScreen}
+        className='mg2r'
+        popupMatchSelectWidth={false}
+      >
+        {
+          screens.map(s => (
+            <Option key={s.id} value={s.id}>{s.name}</Option>
+          ))
+        }
+      </Select>
+    )
+  }
 
   remoteInit = async (term = this.term) => {
     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 {
@@ -80,6 +182,9 @@ export default class VncSession extends RdpSession {
       viewOnly = false,
       scaleViewport = true,
       clipViewport = false,
+      qualityLevel = 3, // 0-9, lower = faster performance
+      compressionLevel = 1, // 0-9, lower = faster performance
+      shared = true,
       username,
       password
     } = tab
@@ -107,21 +212,35 @@ export default class VncSession extends RdpSession {
     const { pid, port } = r
     this.pid = pid
     this.port = port
-    const hs = server
-      ? server.replace(/https?:\/\//, '')
-      : `${host}:${port}`
-    const pre = server.startsWith('https') ? 'wss' : 'ws'
-    const { width, height } = this.state
-    const wsUrl = `${pre}://${hs}/vnc/${pid}?token=${tokenElecterm}&width=${width}&height=${height}`
+
+    // Load VNC module if not already loaded
+    try {
+      await loadVncModule()
+    } catch (e) {
+      console.error('[VNC-CLIENT] Failed to load VNC module:', e)
+      this.setState({ loading: false })
+      this.setStatus(statusMap.error)
+      return
+    }
+
+    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
     const vncOpts = {
       clipViewport,
       scaleViewport,
       viewOnly,
-      style: {
-        width: width + 'px',
-        height: height + 'px',
-        overflow: 'scroll'
-      },
+      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) {
@@ -130,11 +249,112 @@ export default class VncSession extends RdpSession {
     if (password) {
       vncOpts.credentials.password = password
     }
+    const RFB = window.novnc.RFB
     const rfb = new RFB(
       this.getDom(),
       wsUrl,
       vncOpts
     )
+
+    // Monkey patch _handleExtendedDesktopSize to capture screen info
+    const originalHandleExtendedDesktopSize = rfb._handleExtendedDesktopSize
+    rfb._handleExtendedDesktopSize = function () {
+      try {
+        // Wait for header
+        if (this._sock.rQwait('ExtendedDesktopSize', 4)) {
+          return false
+        }
+
+        const numberOfScreens = this._sock.rQpeek8()
+        const bytes = 4 + (numberOfScreens * 16)
+        if (this._sock.rQwait('ExtendedDesktopSize', bytes)) {
+          return false
+        }
+
+        const firstUpdate = !this._supportsSetDesktopSize
+        this._supportsSetDesktopSize = true
+
+        if (firstUpdate) {
+          this._requestRemoteResize()
+        }
+
+        const num = this._sock.rQshift8() // number-of-screens
+        this._sock.rQskipBytes(3) // padding
+
+        const screens = []
+        for (let i = 0; i < num; i += 1) {
+          const idBytes = this._sock.rQshiftBytes(4)
+          const id = (idBytes[0] << 24 | idBytes[1] << 16 | idBytes[2] << 8 | idBytes[3]) >>> 0
+
+          const x = this._sock.rQshift16() // x-position
+          const y = this._sock.rQshift16() // y-position
+          const w = this._sock.rQshift16() // width
+          const h = this._sock.rQshift16() // height
+
+          const flagsBytes = this._sock.rQshiftBytes(4)
+          const flags = (flagsBytes[0] << 24 | flagsBytes[1] << 16 | flagsBytes[2] << 8 | flagsBytes[3]) >>> 0
+
+          screens.push({ id, x, y, width: w, height: h, flags })
+
+          if (i === 0) {
+            this._screenID = idBytes
+            this._screenFlags = flagsBytes
+          }
+        }
+
+        // Store the screens in a custom property and dispatch event
+        this.screens = screens
+        this.dispatchEvent(new CustomEvent('screens', { detail: screens }))
+
+        // Handle the resize feedback logic from original code
+        if (this._FBU.x === 1 && this._FBU.y !== 0) {
+          let msg = ''
+          switch (this._FBU.y) {
+            case 1: msg = 'Resize is administratively prohibited'; break
+            case 2: msg = 'Out of resources'; break
+            case 3: msg = 'Invalid screen layout'; break
+            default: msg = 'Unknown reason'; break
+          }
+          console.warn('Server did not accept the resize request: ' + msg)
+        } else {
+          this._resize(this._FBU.width, this._FBU.height)
+        }
+
+        return true
+      } catch (e) {
+        console.error('Error in patched _handleExtendedDesktopSize', e)
+        return originalHandleExtendedDesktopSize.call(this)
+      }
+    }
+
+    // Monkey patch autoscale to support single screen scaling
+    const originalAutoscale = rfb._display.autoscale
+    rfb._display.autoscale = (containerWidth, containerHeight) => {
+      const { currentScreen, screens } = this.state
+
+      if (currentScreen === 'all' || !screens.length) {
+        return originalAutoscale.call(rfb._display, containerWidth, containerHeight)
+      }
+
+      const screen = screens.find(s => s.id === currentScreen)
+      if (!screen) {
+        return originalAutoscale.call(rfb._display, containerWidth, containerHeight)
+      }
+
+      let scaleRatio = 1.0
+      if (containerWidth > 0 && containerHeight > 0) {
+        const targetAspectRatio = containerWidth / containerHeight
+        const screenAspectRatio = screen.width / screen.height
+
+        if (screenAspectRatio >= targetAspectRatio) {
+          scaleRatio = containerWidth / screen.width
+        } else {
+          scaleRatio = containerHeight / screen.height
+        }
+      }
+      rfb._display._rescale(scaleRatio)
+    }
+
     const events = [
       'connect',
       'disconnect',
@@ -143,21 +363,29 @@ export default class VncSession extends RdpSession {
       'clipboard',
       'bell',
       'desktopname',
-      'capabilities'
+      'capabilities',
+      'screens',
+      'desktopsize'
     ]
     for (const event of events) {
       rfb.addEventListener(event, this[`on${window.capitalizeFirstLetter(event)}`])
     }
+    rfb.scaleViewport = scaleViewport
+    rfb.clipViewport = clipViewport
     this.rfb = rfb
   }
 
   onConnect = (event) => {
     this.setStatus(statusMap.success)
+    // Capture the remote desktop size from the RFB connection
     this.setState({
       loading: false
     })
   }
 
+  onDesktopsize = (event) => {
+  }
+
   onDisconnect = () => {
     this.setStatus(statusMap.error)
   }
@@ -201,10 +429,97 @@ export default class VncSession extends RdpSession {
     this.setState({
       name: event?.detail?.name || ''
     })
+    this.checkScreens()
   }
 
   onCapabilities = (capabilities) => {
-    console.log('onCapabilities', capabilities)
+    setTimeout(this.checkScreens, 1000)
+  }
+
+  processScreens = (screens) => {
+    if (!screens || !screens.length) {
+      return []
+    }
+    return screens.map((s, i) => ({
+      name: `Screen ${i + 1}`,
+      ...s,
+      id: s.id !== undefined ? s.id : i
+    }))
+  }
+
+  onScreens = (event) => {
+    const screensData = event.detail
+    if (screensData && screensData.length) {
+      const screens = this.processScreens(screensData)
+      this.setState({
+        screens,
+        currentScreen: screens[0].id
+      })
+    }
+  }
+
+  checkScreens = () => {
+    // Attempt to detect screens from noVNC
+    let screens = this.rfb?.screens
+    if (!screens && this.rfb?.capabilities?.screens) {
+      screens = this.rfb.capabilities.screens
+    }
+
+    if (screens && screens.length) {
+      this.setState({
+        screens: this.processScreens(screens)
+      })
+    }
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (
+      prevProps.width !== this.props.width ||
+      prevProps.height !== this.props.height ||
+      prevState.currentScreen !== this.state.currentScreen
+    ) {
+      this.updateViewLayout()
+    }
+  }
+
+  updateViewLayout = () => {
+    const { currentScreen, screens } = this.state
+    const { scaleViewport = true, 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
+    this.rfb.clipViewport = clipViewport
+
+    // Explicitly trigger autoscale to ensure our patched logic runs
+    if (scaleViewport && this.rfb._display) {
+      this.rfb._display.autoscale(container.clientWidth, container.clientHeight)
+    }
+
+    // Handle scrolling to the selected screen
+    this.timer = setTimeout(() => {
+      if (currentScreen === 'all') {
+        container.scrollTo(0, 0)
+      } else {
+        const screen = screens.find(s => s.id === currentScreen)
+        if (screen) {
+          const scale = this.rfb._display.scale
+          container.scrollTo(screen.x * scale, screen.y * scale)
+        }
+      }
+    }, 50)
+  }
+
+  handleSelectScreen = (id) => {
+    this.setState({
+      currentScreen: id
+    })
+    // updateViewLayout will be called by componentDidUpdate
   }
 
   getDom = () => {
@@ -233,10 +548,8 @@ export default class VncSession extends RdpSession {
     )
   }
 
-  renderHelp = () => {
-    return (
-      <Tag color='red' className='mg1l' variant='solid'>Beta</Tag>
-    )
+  handleSendCtrlAltDel = () => {
+    this.rfb?.sendCtrlAltDel()
   }
 
   renderConfirm () {
@@ -263,31 +576,54 @@ export default class VncSession extends RdpSession {
 
   render () {
     const { width: w, height: h } = this.props
-    const vncProps = {
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
+    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 { width, height, loading } = this.state
     const divProps = {
-      style: {
-        width: width + 'px',
-        height: height + 'px'
-      }
+      style: remoteStyle,
+      className: 'vnc-session-wrap session-v-wrap'
     }
+    const contrlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
-          {...vncProps}
           className='rdp-session-wrap pd1'
+          style={{
+            width: w + 'px',
+            height: h + 'px'
+          }}
         >
           {this.renderControl()}
-          <div
-            {...divProps}
-            className='vnc-session-wrap session-v-wrap'
-            ref={this.domRef}
+          <RemoteFloatControl
+            {...contrlProps}
           />
+          <div
+            style={wrapperStyle}
+            className='vnc-scroll-wrapper'
+          >
+            <div
+              {...divProps}
+              ref={this.domRef}
+            />
+          </div>
           {this.renderConfirm()}
         </div>
       </Spin>

package/client/css/basic.styl

@@ -25,6 +25,9 @@ body
   background-color var(--primary)
   outline none
 
+::-webkit-scrollbar-corner
+  background-color transparent
+
 .common-err
   max-height 100px
   overflow-y scroll

package/client/store/event.js

@@ -37,8 +37,8 @@ export default Store => {
     window.dispatchEvent(new Event('resize'))
   }
 
-  Store.prototype.toggleTermFullscreen = function (terminalFullScreen) {
-    window.store.terminalFullScreen = terminalFullScreen
+  Store.prototype.toggleSessFullscreen = function (fullscreen) {
+    window.store.fullscreen = fullscreen
     setTimeout(window.store.triggerResize, 500)
   }
 }

package/client/store/init-state.js

@@ -193,7 +193,7 @@ export default () => {
     height: 500,
     isMaximized: window.pre.runSync('isMaximized'),
     hasNodePty: window.pre.runSync('nodePtyCheck'),
-    terminalFullScreen: false,
+    fullscreen: false,
     hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
     tabsHeight: 36,
 

package/package.json

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

package/client/common/byte-format.js

@@ -1,14 +0,0 @@
-export function formatBytes (sizeInKB) {
-  if (!sizeInKB) {
-    return ''
-  }
-  const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  let index = 0
-
-  while (sizeInKB >= 1024 && index < units.length - 1) {
-    sizeInKB /= 1024
-    index++
-  }
-
-  return `${sizeInKB.toFixed(2)} ${units[index]}`
-}

package/client/components/main/term-fullscreen-control.jsx

@@ -1,21 +0,0 @@
-/**
- * btns
- */
-
-import { FullscreenExitOutlined } from '@ant-design/icons'
-import './term-fullscreen.styl'
-
-export default function TermFullscreenControl (props) {
-  const handleExitFullscreen = () => {
-    window.store.toggleTermFullscreen(false)
-  }
-  if (!props.terminalFullScreen) {
-    return null
-  }
-  return (
-    <FullscreenExitOutlined
-      className='mg1r icon-info font16 pointer spliter term-fullscreen-control'
-      onClick={handleExitFullscreen}
-    />
-  )
-}