@electerm/electerm-react 2.3.103 → 2.3.114

package/client/common/constants.js

@@ -145,6 +145,7 @@ export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
 export const leftSidebarWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
+export const addPanelWidthLsKey = 'addPanelWidth'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
 

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

@@ -13,6 +13,7 @@ const vncConfig = {
     return createBaseInitValues(props, terminalVncType, {
       port: 5900,
       viewOnly: false,
+      clipViewport: true,
       scaleViewport: true,
       connectionHoppings: [],
       ...getAuthTypeDefault(props)
@@ -30,6 +31,7 @@ const vncConfig = {
         { type: 'input', name: 'host', label: e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { 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: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.vnc) },
         commonFields.username,

package/client/components/file-transfer/transfer.jsx

@@ -512,7 +512,9 @@ export default class TransportAction extends Component {
 
   startTransfer = async () => {
     const { fromFile = this.fromFile, zip } = this.props.transfer
-
+    if (!fromFile) {
+      return
+    }
     if (!fromFile.isDirectory) {
       return this.transferFile()
     }

package/client/components/layout/layout.jsx

@@ -116,6 +116,7 @@ export default auto(function Layout (props) {
           'tabsHeight',
           'appPath',
           'leftSidebarWidth',
+          'addPanelWidth',
           'pinned',
           'openedSideBar'
         ])

package/client/components/main/main.jsx

@@ -82,7 +82,7 @@ export default auto(function Index (props) {
     store.initData()
     store.checkForDbUpgrade()
     store.handleGetSerials()
-    // window.pre.runGlobalAsync('registerDeepLink')
+    store.checkPendingDeepLink()
   }, [])
 
   const { store } = props

package/client/components/setting-panel/deep-link-control.jsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react'
+import { Button, message, Tooltip, Tag, Space } from 'antd'
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default function DeepLinkControl () {
+  const [loading, setLoading] = useState(false)
+  const [registrationStatus, setRegistrationStatus] = useState(null)
+
+  const checkRegistrationStatus = async () => {
+    try {
+      const status = await window.pre.runGlobalAsync('checkProtocolRegistration')
+      setRegistrationStatus(status)
+    } catch (error) {
+      console.error('Failed to check protocol registration:', error)
+    }
+  }
+
+  useEffect(() => {
+    checkRegistrationStatus()
+  }, [])
+
+  const handleRegister = async () => {
+    setLoading(true)
+    try {
+      const result = await window.pre.runGlobalAsync('registerDeepLink', true)
+      if (result.registered) {
+        message.success('Protocol handlers registered successfully')
+        await checkRegistrationStatus()
+      } else {
+        message.warning(e('deepLinkSkipped') || 'Registration skipped: ' + result.reason)
+      }
+    } catch (error) {
+      message.error('Failed to register protocol handlers')
+      console.error('Registration error:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleUnregister = async () => {
+    setLoading(true)
+    try {
+      await window.pre.runGlobalAsync('unregisterDeepLink')
+      message.success('Protocol handlers unregistered successfully')
+      await checkRegistrationStatus()
+    } catch (error) {
+      message.error('Failed to unregister protocol handlers')
+      console.error('Unregistration error:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const isAnyProtocolRegistered = () => {
+    if (!registrationStatus) return false
+    return Object.values(registrationStatus).some(status => status === true)
+  }
+
+  const isAllProtocolsRegistered = () => {
+    if (!registrationStatus) return false
+    return Object.values(registrationStatus).every(status => status === true)
+  }
+
+  const renderTooltipContent = () => {
+    const protocols = ['ssh', 'telnet', 'rdp', 'vnc', 'serial']
+
+    return (
+      <div>
+        <div className='pd1b'>
+          Register electerm to handle protocol URLs (ssh://, telnet://, rdp://, vnc://, serial://)
+        </div>
+
+        {registrationStatus && (
+          <>
+            <div className='pd1b'>
+              Protocol Status
+            </div>
+            <div className='pd1b'>
+              <Space size='small' wrap>
+                {protocols.map(protocol => {
+                  const isRegistered = registrationStatus[protocol]
+                  return (
+                    <Tag
+                      key={protocol}
+                      icon={isRegistered ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+                      color={isRegistered ? 'success' : 'default'}
+                    >
+                      {protocol}://
+                    </Tag>
+                  )
+                })}
+              </Space>
+            </div>
+          </>
+        )}
+      </div>
+    )
+  }
+
+  const isRegistered = isAnyProtocolRegistered()
+  const isAllRegistered = isAllProtocolsRegistered()
+
+  return (
+    <div className='pd2b'>
+      <Tooltip
+        title={renderTooltipContent()}
+      >
+        <Space>
+          {
+            !isAllRegistered && (
+              <Button
+                type='primary'
+                onClick={handleRegister}
+                loading={loading}
+              >
+                {e('registerDeepLink')}
+              </Button>
+            )
+          }
+          {
+            isRegistered && (
+              <Button
+                color='danger'
+                variant='solid'
+                onClick={handleUnregister}
+                loading={loading}
+              >
+                {e('unregisterDeepLink')}
+              </Button>
+            )
+          }
+        </Space>
+      </Tooltip>
+    </div>
+  )
+}

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

@@ -31,6 +31,7 @@ import StartSession from './start-session-select'
 import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
 import isColorDark from '../../common/is-color-dark'
+import DeepLinkControl from './deep-link-control'
 import './setting.styl'
 
 const { Option } = Select
@@ -675,6 +676,9 @@ export default class SettingCommon extends Component {
             'debug'
           ].map(this.renderToggle)
         }
+        {
+          window.et.isWebApp ? null : <DeepLinkControl />
+        }
         {this.renderLoginPass()}
         {this.renderReset()}
       </div>

package/client/components/sftp/file-item.jsx

@@ -271,16 +271,7 @@ export default class FileSection extends React.Component {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
     })
-    if (e && e.dataTransfer) {
-      const dt = e.dataTransfer
-      if (dt.items) {
-        // Use DataTransferItemList interface to remove the drag data
-        for (let i = 0, len = dt.items.length; i < len; i++) {
-          dt.items.remove(i)
-        }
-      }
-      dt.clearData()
-    }
+    e && e.dataTransfer && e.dataTransfer.clearData()
   }
 
   onDropFile = async (fromFiles, toFile, fromFileManager) => {

package/client/components/tabs/add-btn-menu.jsx

@@ -0,0 +1,89 @@
+/**
+ * Add button menu component
+ */
+
+import React, { useCallback } from 'react'
+import {
+  CodeFilled,
+  RightSquareFilled
+} from '@ant-design/icons'
+import BookmarksList from '../sidebar/bookmark-select'
+import DragHandle from '../common/drag-handle'
+
+const e = window.translate
+
+export default function AddBtnMenu ({
+  menuRef,
+  menuPosition,
+  menuTop,
+  menuLeft,
+  onMenuScroll,
+  onTabAdd,
+  batch,
+  addPanelWidth,
+  setAddPanelWidth
+}) {
+  const { onNewSsh } = window.store
+  const cls = 'pd2x pd1y context-item pointer'
+  const addTabBtn = window.store.hasNodePty
+    ? (
+      <div
+        className={cls}
+        onClick={onTabAdd}
+      >
+        <RightSquareFilled /> {e('newTab')}
+      </div>
+      )
+    : null
+
+  const onDragEnd = useCallback((nw) => {
+    if (setAddPanelWidth) {
+      setAddPanelWidth(nw)
+    }
+  }, [setAddPanelWidth])
+
+  const onDragMove = useCallback((nw) => {
+    if (menuRef.current) {
+      menuRef.current.style.width = nw + 'px'
+    }
+  }, [menuRef])
+
+  const dragProps = {
+    min: 300,
+    max: 600,
+    width: addPanelWidth || 300,
+    onDragEnd,
+    onDragMove,
+    left: menuPosition === 'right'
+  }
+
+  console.log('render add btn menu', dragProps)
+
+  return (
+    <div
+      ref={menuRef}
+      className={`add-menu-wrap add-menu-${menuPosition}`}
+      style={{
+        maxHeight: window.innerHeight - menuTop - 50,
+        top: menuTop,
+        left: menuLeft,
+        width: addPanelWidth ? addPanelWidth + 'px' : undefined
+      }}
+      onScroll={onMenuScroll}
+    >
+      <DragHandle
+        {...dragProps}
+      />
+      <div
+        className={cls}
+        onClick={onNewSsh}
+      >
+        <CodeFilled /> {e('newBookmark')}
+      </div>
+      {addTabBtn}
+      <BookmarksList
+        store={window.store}
+      />
+    </div>
+  )
+}

package/client/components/tabs/add-btn.jsx

@@ -5,11 +5,9 @@
 import React, { Component } from 'react'
 import { createPortal } from 'react-dom'
 import {
-  CodeFilled,
-  PlusOutlined,
-  RightSquareFilled
+  PlusOutlined
 } from '@ant-design/icons'
-import BookmarksList from '../sidebar/bookmark-select'
+import AddBtnMenu from './add-btn-menu'
 import classNames from 'classnames'
 import hasActiveInput from '../../common/has-active-input'
 import './add-btn.styl'
@@ -93,43 +91,23 @@ export default class AddBtn extends Component {
   }
 
   renderMenus = () => {
-    const { onNewSsh } = window.store
-    const cls = 'pd2x pd1y context-item pointer'
-    const addTabBtn = window.store.hasNodePty
-      ? (
-        <div
-          className={cls}
-          onClick={this.handleTabAdd}
-        >
-          <RightSquareFilled /> {e('newTab')}
-        </div>
-        )
-      : null
-
     const { menuPosition, menuTop, menuLeft } = this.state
+    const addBtnMenuProps = {
+      menuRef: this.menuRef,
+      menuPosition,
+      menuTop,
+      menuLeft,
+      onMenuScroll: this.handleMenuScroll,
+      onTabAdd: this.handleTabAdd,
+      batch: this.props.batch,
+      addPanelWidth: this.props.addPanelWidth,
+      setAddPanelWidth: window.store.setAddPanelWidth
+    }
 
     return (
-      <div
-        ref={this.menuRef}
-        className={`add-menu-wrap add-menu-${menuPosition}`}
-        style={{
-          maxHeight: window.innerHeight - menuTop - 50,
-          top: menuTop,
-          left: menuLeft
-        }}
-        onScroll={this.handleMenuScroll}
-      >
-        <div
-          className={cls}
-          onClick={onNewSsh}
-        >
-          <CodeFilled /> {e('newBookmark')}
-        </div>
-        {addTabBtn}
-        <BookmarksList
-          store={window.store}
-        />
-      </div>
+      <AddBtnMenu
+        {...addBtnMenuProps}
+      />
     )
   }
 

package/client/components/tabs/add-btn.styl

@@ -6,8 +6,12 @@
   border 1px solid var(--main-lighter)
   border-radius 6px
   box-shadow 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--main-darker)
-  min-width 160px
-  max-width 300px
+  min-width 300px
+  max-width 600px
   overflow-y auto
   margin-top 4px
   padding 4px 15px
+  .drag-handle
+    right 3px
+    display block
+

package/client/components/tabs/index.jsx

@@ -199,6 +199,7 @@ export default class Tabs extends Component {
         className={cls}
         empty={!this.props.tabs?.length}
         batch={this.props.batch}
+        addPanelWidth={this.props.addPanelWidth}
       />
     )
   }

package/client/components/tabs/tabs.styl

@@ -201,8 +201,6 @@
   &:hover
     color var(--text)
 
-.add-menu-wrap
-  overflow-y scroll
 .window-controls
   .window-control-minimize
   .window-control-maximize

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

@@ -79,9 +79,11 @@ export default class VncSession extends RdpSession {
       term: terminalType,
       viewOnly = false,
       scaleViewport = true,
+      clipViewport = false,
       username,
       password
     } = tab
+    console.log('vnc tab', tab)
     const opts = clone({
       term: terminalType || config.terminalType,
       tabId: id,
@@ -113,6 +115,7 @@ export default class VncSession extends RdpSession {
     const { width, height } = this.state
     const wsUrl = `${pre}://${hs}/vnc/${pid}?token=${tokenElecterm}&width=${width}&height=${height}`
     const vncOpts = {
+      clipViewport,
       scaleViewport,
       viewOnly,
       style: {

package/client/store/common.js

@@ -9,6 +9,7 @@ import {
   modals,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
+  addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
   connectionMap,
   settingMap,
@@ -133,6 +134,11 @@ export default Store => {
     window.store.leftSidebarWidth = v
   }
 
+  Store.prototype.setAddPanelWidth = function (v) {
+    ls.setItem(addPanelWidthLsKey, v)
+    window.store.addPanelWidth = v
+  }
+
   Store.prototype.setRightSidePanelWidth = function (v) {
     ls.setItem(rightSidebarWidthKey, v)
     window.store.rightPanelWidth = v

package/client/store/init-state.js

@@ -16,6 +16,7 @@ import {
   localAddrBookmarkLsKey,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
+  addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
@@ -151,6 +152,7 @@ export default () => {
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey),
     leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
+    addPanelWidth: parseInt(ls.getItem(addPanelWidthLsKey), 10) || 300,
     menuOpened: false,
     pinned: ls.getItem(sidebarPinnedKey) === 'true',
 

package/client/store/load-data.js

@@ -45,7 +45,9 @@ export async function addTabFromCommandLine (store, opts) {
     options,
     argv
   } = opts
-  store.commandLineHelp = helpInfo
+  if (helpInfo) {
+    store.commandLineHelp = helpInfo
+  }
   if (isHelp) {
     return store.openAbout(infoTabs.cmd)
   }
@@ -205,4 +207,10 @@ export default (Store) => {
   Store.prototype.addTabFromCommandLine = (event, opts) => {
     addTabFromCommandLine(window.store, opts)
   }
+  Store.prototype.checkPendingDeepLink = async function () {
+    const pending = await window.pre.runGlobalAsync('getPendingDeepLink')
+    if (pending) {
+      addTabFromCommandLine(window.store, pending)
+    }
+  }
 }

package/package.json

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