@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/context-menu/zoom.jsx

@@ -1,4 +1,3 @@
-import { Component } from '../common/react-subx'
 import InputNumberConfirm from '../common/input-confirm'
 
 import {
@@ -6,35 +5,32 @@ import {
   PlusCircleOutlined
 } from '@ant-design/icons'
 
-export default class ZoomMenu extends Component {
-  handleChange = (v) => {
-    const { store } = this.props
+export default function ZoomMenu (props) {
+  const { store } = window
+  const handleChange = (v) => {
     store.zoom(v / 100)
   }
 
-  render () {
-    const { store } = this.props
-    return (
-      <InputNumberConfirm
-        value={parseInt(store.config.zoom * 100, 10)}
-        onChange={this.handleChange}
-        step={1}
-        min={25}
-        max={500}
-        addonAfter='%'
-        addonBefore={
-          <div>
-            <PlusCircleOutlined
-              onClick={() => store.zoom(0.25, true)}
-              className='mg1r pointer font16'
-            />
-            <MinusCircleOutlined
-              onClick={() => store.zoom(-0.25, true)}
-              className='pointer font16'
-            />
-          </div>
-        }
-      />
-    )
-  }
+  return (
+    <InputNumberConfirm
+      value={parseInt(props.config.zoom * 100, 10)}
+      onChange={handleChange}
+      step={1}
+      min={25}
+      max={500}
+      addonAfter='%'
+      addonBefore={
+        <div>
+          <PlusCircleOutlined
+            onClick={() => store.zoom(0.25, true)}
+            className='mg1r pointer font16'
+          />
+          <MinusCircleOutlined
+            onClick={() => store.zoom(-0.25, true)}
+            className='pointer font16'
+          />
+        </div>
+      }
+    />
+  )
 }

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

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { auto } from 'manate/react'
 import {
   Select
 } from 'antd'
@@ -16,36 +16,35 @@ const {
 
 const e = window.translate
 
-export default class FooterEntry extends Component {
-  handleInfoPanel = () => {
-    const { activeTerminalId } = this.props.store
+export default auto(function FooterEntry (props) {
+  function handleInfoPanel () {
+    const { store } = window
+    store.rightPanelVisible = !store.rightPanelVisible
     postMessage({
       action: terminalActions.showInfoPanel,
-      activeSplitId: activeTerminalId
+      currentTabId: store.currentTabId
     })
   }
 
-  batchInput = (cmd, toAll) => {
-    const { activeTerminalId } = this.props.store
+  function batchInput (cmd, toAll) {
     postMessage({
       action: terminalActions.batchInput,
-      activeSplitId: activeTerminalId,
+      currentTabId: props.store.currentTabId,
       toAll,
       cmd
     })
   }
 
-  handleSwitchEncoding = encode => {
-    const { activeTerminalId } = this.props.store
+  function handleSwitchEncoding (encode) {
     postMessage({
       encode,
       action: terminalActions.changeEncode,
-      activeSplitId: activeTerminalId
+      currentTabId: props.store.currentTabId
     })
   }
 
-  isLoading = () => {
-    const { currentTab } = this.props.store
+  function isLoading () {
+    const { currentTab } = props.store
     if (!currentTab) {
       return true
     }
@@ -55,18 +54,18 @@ export default class FooterEntry extends Component {
     return status !== statusMap.success
   }
 
-  renderBatchInputs () {
+  function renderBatchInputs () {
     return (
       <div className='terminal-footer-unit terminal-footer-center'>
         <BatchInput
-          input={this.batchInput}
-          batchInputs={this.props.store.batchInputs}
+          input={batchInput}
+          batchInputs={props.store.batchInputs}
         />
       </div>
     )
   }
 
-  renderQuickCommands () {
+  function renderQuickCommands () {
     return (
       <div className='terminal-footer-unit terminal-footer-qm'>
         <Qm />
@@ -74,14 +73,14 @@ export default class FooterEntry extends Component {
     )
   }
 
-  renderEncodingInfo () {
+  function renderEncodingInfo () {
     const selectProps = {
       style: {
         minWidth: 30
       },
       placeholder: e('encode'),
-      defaultValue: this.props.currentTab?.encode,
-      onSelect: this.handleSwitchEncoding,
+      defaultValue: props.currentTab?.encode,
+      onSelect: handleSwitchEncoding,
       size: 'small',
       popupMatchSelectWidth: false
     }
@@ -106,54 +105,55 @@ export default class FooterEntry extends Component {
     )
   }
 
-  renderInfoIcon () {
-    const loading = this.isLoading()
+  function renderInfoIcon () {
+    const loading = isLoading()
     if (loading) {
       return null
     }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
         <InfoCircleOutlined
-          onClick={this.handleInfoPanel}
+          onClick={handleInfoPanel}
           className='pointer font18 terminal-info-icon'
         />
       </div>
     )
   }
 
-  render () {
-    const { tabs, leftSidebarWidth, openedSideBar } = this.props.store
-    const pane = this.props.store.currentTab?.pane
-    const type = this.props.store.currentTab?.type
-    if (
-      type === 'rdp' ||
-      type === 'web' ||
-      type === 'vnc' ||
-      pane === paneMap.fileManager ||
-      !tabs.length
-    ) {
-      return null
-    }
-    const w = 43 + leftSidebarWidth
-    const sideProps = openedSideBar
-      ? {
-          className: 'main-footer',
-          style: {
-            left: `${w}px`
-          }
-        }
-      : {
-          className: 'main-footer'
-        }
+  const { tabs, leftSidebarWidth, openedSideBar, currentTab } = props.store
+  const pane = currentTab?.pane
+  const type = currentTab?.type
+  if (
+    type === 'rdp' ||
+    type === 'web' ||
+    type === 'vnc' ||
+    pane === paneMap.fileManager ||
+    pane === paneMap.sftp ||
+    !tabs.length
+  ) {
     return (
-      <div {...sideProps}>
-        <div className='terminal-footer-flex'>
-          {this.renderQuickCommands()}
-          {this.renderBatchInputs()}
-          {this.renderEncodingInfo()}
-          {this.renderInfoIcon()}
-        </div>
-      </div>
+      <div className='main-footer' />
     )
   }
-}
+  const w = 43 + leftSidebarWidth
+  const sideProps = openedSideBar
+    ? {
+        className: 'main-footer',
+        style: {
+          left: `${w}px`
+        }
+      }
+    : {
+        className: 'main-footer'
+      }
+  return (
+    <div {...sideProps}>
+      <div className='terminal-footer-flex'>
+        {renderQuickCommands()}
+        {renderBatchInputs()}
+        {renderEncodingInfo()}
+        {renderInfoIcon()}
+      </div>
+    </div>
+  )
+})

package/client/components/icons/split-icons.jsx

@@ -0,0 +1,77 @@
+import Icon from '@ant-design/icons'
+
+const singleSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Two Columns (c2)
+const twoColumnsSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='12' y1='2' x2='12' y2='22' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Three Columns (c3)
+const threeColumnsSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='8' y1='2' x2='8' y2='22' stroke='currentColor' strokeWidth='2' />
+    <line x1='16' y1='2' x2='16' y2='22' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Two Rows (r2)
+const twoRowsSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='2' y1='12' x2='22' y2='12' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Three Rows (r3)
+const threeRowsSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='2' y1='8' x2='22' y2='8' stroke='currentColor' strokeWidth='2' />
+    <line x1='2' y1='16' x2='22' y2='16' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Grid 2x2 (2x2)
+const grid2x2Svg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='12' y1='2' x2='12' y2='22' stroke='currentColor' strokeWidth='2' />
+    <line x1='2' y1='12' x2='22' y2='12' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Two Rows Right (1x2r)
+const twoRowsRightSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='12' y1='2' x2='12' y2='22' stroke='currentColor' strokeWidth='2' />
+    <line x1='12' y1='12' x2='22' y2='12' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+// Two Columns Bottom (1x1c)
+const twoColumnsBottomSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 24 24'>
+    <rect x='2' y='2' width='20' height='20' fill='none' stroke='currentColor' strokeWidth='2' />
+    <line x1='2' y1='12' x2='22' y2='12' stroke='currentColor' strokeWidth='2' />
+    <line x1='12' y1='12' x2='12' y2='22' stroke='currentColor' strokeWidth='2' />
+  </svg>
+)
+
+export const SingleIcon = props => (<Icon component={singleSvg} {...props} />)
+export const TwoColumnsIcon = props => (<Icon component={twoColumnsSvg} {...props} />)
+export const ThreeColumnsIcon = props => (<Icon component={threeColumnsSvg} {...props} />)
+export const TwoRowsIcon = props => (<Icon component={twoRowsSvg} {...props} />)
+export const ThreeRowsIcon = props => (<Icon component={threeRowsSvg} {...props} />)
+export const Grid2x2Icon = props => (<Icon component={grid2x2Svg} {...props} />)
+export const TwoRowsRightIcon = props => (<Icon component={twoRowsRightSvg} {...props} />)
+export const TwoColumnsBottomIcon = props => (<Icon component={twoColumnsBottomSvg} {...props} />)

package/client/components/layout/layout-alg.js

@@ -0,0 +1,260 @@
+import {
+  splitMap
+} from '../../common/constants'
+
+const layoutSingle = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0
+    }
+  ],
+  handleStyles: []
+})
+
+const layoutTwoColumns = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: (w / 2 - 2) + 'px'
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: 0,
+      bottom: 0,
+      right: 0
+    }
+  ],
+  handleStyles: [
+    {
+      left: (w / 2 - 2) + 'px',
+      top: 0,
+      bottom: 0
+    }
+  ]
+})
+
+const layoutThreeColumns = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: (2 * w / 3 - 2) + 'px'
+    },
+    {
+      left: (w / 3 + 2) + 'px',
+      top: 0,
+      bottom: 0,
+      right: (w / 3 - 2) + 'px'
+    },
+    {
+      left: (2 * w / 3 + 2) + 'px',
+      top: 0,
+      bottom: 0,
+      right: 0
+    }
+  ],
+  handleStyles: [
+    {
+      left: (w / 3 - 2) + 'px',
+      top: 0,
+      bottom: 0
+    },
+    {
+      left: (2 * w / 3 - 2) + 'px',
+      top: 0,
+      bottom: 0
+    }
+  ]
+})
+
+const layoutTwoRows = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: (h / 2 - 2) + 'px'
+    },
+    {
+      left: 0,
+      top: (h / 2 + 2) + 'px',
+      right: 0,
+      bottom: 0
+    }
+  ],
+  handleStyles: [
+    {
+      top: (h / 2 - 2) + 'px',
+      left: 0,
+      right: 0
+    }
+  ]
+})
+
+const layoutThreeRows = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: (2 * h / 3 - 2) + 'px'
+    },
+    {
+      left: 0,
+      top: (h / 3 + 2) + 'px',
+      right: 0,
+      bottom: (h / 3 - 2) + 'px'
+    },
+    {
+      left: 0,
+      top: (2 * h / 3 + 2) + 'px',
+      right: 0,
+      bottom: 0
+    }
+  ],
+  handleStyles: [
+    {
+      top: (h / 3 - 2) + 'px',
+      left: 0,
+      right: 0
+    },
+    {
+      top: (2 * h / 3 - 2) + 'px',
+      left: 0,
+      right: 0
+    }
+  ]
+})
+
+const layoutGrid2x2 = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      right: (w / 2 - 2) + 'px',
+      bottom: (h / 2 - 2) + 'px'
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: 0,
+      right: 0,
+      bottom: (h / 2 - 2) + 'px'
+    },
+    {
+      left: 0,
+      top: (h / 2 + 2) + 'px',
+      right: (w / 2 - 2) + 'px',
+      bottom: 0
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: (h / 2 + 2) + 'px',
+      right: 0,
+      bottom: 0
+    }
+  ],
+  handleStyles: [
+    {
+      left: (w / 2 - 2) + 'px',
+      top: 0,
+      bottom: 0
+    },
+    {
+      top: (h / 2 - 2) + 'px',
+      left: 0,
+      right: 0
+    }
+  ]
+})
+
+const layoutTwoRowsRight = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: (w / 2 - 2) + 'px'
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: 0,
+      right: 0,
+      bottom: (h / 2 - 2) + 'px'
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: (h / 2 + 2) + 'px',
+      right: 0,
+      bottom: 0
+    }
+  ],
+  handleStyles: [
+    {
+      left: (w / 2 - 2) + 'px',
+      top: 0,
+      bottom: 0
+    },
+    {
+      top: (h / 2 - 2) + 'px',
+      left: (w / 2 + 2) + 'px',
+      right: 0
+    }
+  ]
+})
+
+const layoutTwoColumnsBottom = (w, h) => ({
+  wrapStyles: [
+    {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: (h / 2 - 2) + 'px'
+    },
+    {
+      left: 0,
+      top: (h / 2 + 2) + 'px',
+      right: (w / 2 - 2) + 'px',
+      bottom: 0
+    },
+    {
+      left: (w / 2 + 2) + 'px',
+      top: (h / 2 + 2) + 'px',
+      right: 0,
+      bottom: 0
+    }
+  ],
+  handleStyles: [
+    {
+      top: (h / 2 - 2) + 'px',
+      left: 0,
+      right: 0
+    },
+    {
+      left: (w / 2 - 2) + 'px',
+      top: (h / 2 + 2) + 'px',
+      bottom: 0
+    }
+  ]
+})
+
+const layoutFunctions = {
+  [splitMap.c1]: layoutSingle,
+  [splitMap.c2]: layoutTwoColumns,
+  [splitMap.c3]: layoutThreeColumns,
+  [splitMap.r2]: layoutTwoRows,
+  [splitMap.r3]: layoutThreeRows,
+  [splitMap.c2x2]: layoutGrid2x2,
+  [splitMap.c1r2]: layoutTwoRowsRight,
+  [splitMap.r1c2]: layoutTwoColumnsBottom
+}
+
+export default function layoutAlg (layout, w, h) {
+  const layoutFunction = layoutFunctions[layout] || layoutSingle
+  return layoutFunction(w, h)
+}

package/client/components/layout/layout-item.jsx

@@ -0,0 +1,94 @@
+import {
+  tabActions
+} from '../../common/constants'
+import postMsg from '../../common/post-msg'
+
+export default function LayoutItem (props) {
+  const {
+    children,
+    i,
+    batch,
+    ...itemProps
+  } = props
+  function handleClick (e) {
+    let currentElement = e.target
+    while (currentElement) {
+      if (currentElement.classList && currentElement.classList.contains('tabs-dd-icon')) {
+        return false
+      }
+      currentElement = currentElement.parentElement
+    }
+    window.store.currentLayoutBatch = i
+  }
+
+  function getDom () {
+    return document.querySelector(`.layout-item.v${batch + 1}`)
+  }
+
+  function onDrop (e) {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    let currentElement = target
+    while (currentElement) {
+      if (currentElement.classList && currentElement.classList.contains('tab')) {
+        return
+      }
+      currentElement = currentElement.parentElement
+    }
+    // debug('target drop', target)
+    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    const onDropElem = getDom
+    if (!onDropElem || !fromTab || fromTab.batch === batch) {
+      return
+    }
+    const { store } = window
+    const { tabs } = store
+    const t = tabs.find(t => t.id === fromTab.id)
+    if (!t) {
+      return
+    }
+    t.batch = batch
+    postMsg({
+      action: tabActions.changeCurrentTabId,
+      currentTabId: store.currentTabId
+    })
+    store.setTabs(tabs)
+    clearCls()
+  }
+
+  function clearCls () {
+    getDom()?.classList.remove('drag-over')
+  }
+
+  function addCls () {
+    getDom()?.classList.add('drag-over')
+  }
+
+  function onDragEnter () {
+    addCls()
+  }
+
+  function onDragLeave (e) {
+    clearCls()
+  }
+
+  function onDragEnd (e) {
+    clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
+  return (
+    <div
+      {...itemProps}
+      onClick={handleClick}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragEnd={onDragEnd}
+      onDrop={onDrop}
+    >
+      {children}
+    </div>
+  )
+}