Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refit terminal when screen is resized; closes #2365

Browse source
This commit is contained in:
Dane Everitt 2020-10-03 19:21:11 -07:00
parent 2d56cacbab
commit 5fc4444f5a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/scripts/components/server/Console.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useRef } from 'react';
import { ITerminalOptions, Terminal } from 'xterm'; import { ITerminalOptions, Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit'; import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@ -7,6 +7,8 @@ import styled from 'styled-components/macro';
import { usePermissions } from '@/plugins/usePermissions'; import { usePermissions } from '@/plugins/usePermissions';
import tw from 'twin.macro'; import tw from 'twin.macro';
import 'xterm/dist/xterm.css'; import 'xterm/dist/xterm.css';
import useEventListener from '@/plugins/useEventListener';
import { debounce } from 'debounce';
const theme = { const theme = {
background: 'transparent', background: 'transparent',
@ -51,9 +53,7 @@ const TerminalDiv = styled.div`
export default () => { export default () => {
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m'; const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m';
const [ terminalElement, setTerminalElement ] = useState<HTMLDivElement | null>(null); const ref = useRef<HTMLDivElement>(null);
const useRef = useCallback(node => setTerminalElement(node), []);
const terminal = useMemo(() => new Terminal({ ...terminalProps }), []); const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
const { connected, instance } = ServerContext.useStoreState(state => state.socket); const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console' ]); const [ canSendCommands ] = usePermissions([ 'control.console' ]);
@ -80,8 +80,8 @@ export default () => {
}; };
useEffect(() => { useEffect(() => {
if (connected && terminalElement && !terminal.element) { if (connected && ref.current && !terminal.element) {
terminal.open(terminalElement); terminal.open(ref.current);
// @see https://github.com/xtermjs/xterm.js/issues/2265 // @see https://github.com/xtermjs/xterm.js/issues/2265
// @see https://github.com/xtermjs/xterm.js/issues/2230 // @see https://github.com/xtermjs/xterm.js/issues/2230
@ -98,7 +98,13 @@ export default () => {
return true; return true;
}); });
} }
}, [ terminal, connected, terminalElement ]); }, [ terminal, connected ]);
const fit = debounce(() => {
TerminalFit.fit(terminal);
}, 100);
useEventListener('resize', () => fit());
useEffect(() => { useEffect(() => {
if (connected && instance) { if (connected && instance) {
@ -135,7 +141,7 @@ export default () => {
maxHeight: '32rem', maxHeight: '32rem',
}} }}
> >
<TerminalDiv id={'terminal'} ref={useRef}/> <TerminalDiv id={'terminal'} ref={ref}/>
</div> </div>
{canSendCommands && {canSendCommands &&
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}> <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>