resize handler

desktopmerge
bunsenstraat 1 year ago
parent ca44757c03
commit 592f95e46c
  1. 2
      libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
  2. 6
      libs/remix-ui/panel/src/lib/main/main-panel.tsx
  3. 6
      libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx
  4. 12
      libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx
  5. 2
      libs/remix-ui/xterm/src/lib/components/xterm-fit-addOn.ts
  6. 1
      libs/remix-ui/xterm/src/lib/css/index.css

@ -8,6 +8,7 @@ interface IRemixDragBarUi {
setHideStatus: (hide: boolean) => void setHideStatus: (hide: boolean) => void
hidden: boolean hidden: boolean
minHeight?: number minHeight?: number
onResize: (height: number) => void
} }
const DragBar = (props: IRemixDragBarUi) => { const DragBar = (props: IRemixDragBarUi) => {
@ -19,6 +20,7 @@ const DragBar = (props: IRemixDragBarUi) => {
const h = window.innerHeight - data.y const h = window.innerHeight - data.y
props.refObject.current.setAttribute('style', `height: ${h}px;`) props.refObject.current.setAttribute('style', `height: ${h}px;`)
setDragBarPosY(props.refObject.current.offsetTop) setDragBarPosY(props.refObject.current.offsetTop)
props.onResize(h)
setDragState(false) setDragState(false)
props.setHideStatus(false) props.setHideStatus(false)
} }

@ -52,13 +52,17 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
appContext.layout.emit('change', appContext.layout.panels) appContext.layout.emit('change', appContext.layout.panels)
} }
const resize = (height: number) => {
appContext.layout.emit('resize', height)
}
return ( return (
<div className="mainview"> <div className="mainview">
{Object.values(plugins).map((pluginRecord, i) => { {Object.values(plugins).map((pluginRecord, i) => {
return ( return (
<React.Fragment key={`mainView${i}`}> <React.Fragment key={`mainView${i}`}>
{pluginRecord.profile.name === 'terminal' ? ( {pluginRecord.profile.name === 'terminal' ? (
<DragBar key="dragbar-terminal" hidden={pluginRecord.minimized || false} setHideStatus={showTerminal} refObject={terminalRef}></DragBar> <DragBar key="dragbar-terminal" onResize={resize} hidden={pluginRecord.minimized || false} setHideStatus={showTerminal} refObject={terminalRef}></DragBar>
) : null} ) : null}
<RemixUIPanelPlugin ref={refs[i]} key={pluginRecord.profile.name} pluginRecord={pluginRecord} /> <RemixUIPanelPlugin ref={refs[i]} key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
</React.Fragment> </React.Fragment>

@ -46,10 +46,16 @@ const RemixUiXterm = (props: RemixUiXtermProps) => {
} }
},[theme]) },[theme])
useEffect(() => {
fitAddon.fit()
},[timeStamp])
const onResize = (event: { cols: number; rows: number }) => { const onResize = (event: { cols: number; rows: number }) => {
resize(event, pid) resize(event, pid)
} }
return ( return (
<Xterm <Xterm
addons={[fitAddon]} addons={[fitAddon]}

@ -73,6 +73,18 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
handleThemeChange(theme) handleThemeChange(theme)
}) })
plugin.on('layout', 'resize', async (height: number) => {
setTerminals(prevState => {
const terminal = prevState.find(xtermState => xtermState.hidden === false)
if (terminal) {
if (terminal.ref && terminal.ref.terminal) {
terminal.timeStamp = Date.now()
}
}
return [...prevState]
})
})
const theme = await plugin.call('theme', 'currentTheme') const theme = await plugin.call('theme', 'currentTheme')
handleThemeChange(theme) handleThemeChange(theme)

@ -85,7 +85,7 @@ export class FitAddon implements ITerminalAddon {
const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth; const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
const geometry = { const geometry = {
cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)), cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)) rows: Math.max(MINIMUM_ROWS, Math.floor((availableHeight - 17) / dims.css.cell.height))
}; };
return geometry; return geometry;

@ -45,6 +45,7 @@
.xterm-panel-header { .xterm-panel-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.xterm-panel-header-left { .xterm-panel-header-left {

Loading…
Cancel
Save