StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add scroll down helper to console (#2951)

Browse source
This commit is contained in:
Jakob 2021-06-05 17:39:36 +02:00 • committed by GitHub
parent 75d254a6a4
commit 647d2cbf92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,10 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ITerminalOptions, Terminal } from 'xterm';
import { Terminal, ITerminalOptions } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';
import { SearchBarAddon } from 'xterm-addon-search-bar';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
@ -72,12 +73,13 @@ export default () => {
const searchAddon = new SearchAddon();
const searchBar = new SearchBarAddon({ searchAddon });
const webLinksAddon = new WebLinksAddon();
const scrollDownHelperAddon = new ScrollDownHelperAddon();
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console' ]);
const [canSendCommands] = usePermissions(['control.console']);
const serverId = ServerContext.useStoreState(state => state.server.data!.id);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
const [ history, setHistory ] = usePersistedState<string[]>(`${serverId}:command_history`, []);
const [ historyIndex, setHistoryIndex ] = useState(-1);
const [history, setHistory] = usePersistedState<string[]>(`${serverId}:command_history`, []);
const [historyIndex, setHistoryIndex] = useState(-1);
const handleConsoleOutput = (line: string, prelude = false) => terminal.writeln(
(prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
@ -125,7 +127,7 @@ export default () => {
const command = e.currentTarget.value;
if (e.key === 'Enter' && command.length > 0) {
setHistory(prevHistory => [ command, ...prevHistory! ].slice(0, 32));
setHistory(prevHistory => [command, ...prevHistory!].slice(0, 32));
setHistoryIndex(-1);
instance && instance.send('send command', command);
@ -139,6 +141,7 @@ export default () => {
terminal.loadAddon(searchAddon);
terminal.loadAddon(searchBar);
terminal.loadAddon(webLinksAddon);
terminal.loadAddon(scrollDownHelperAddon);
terminal.open(ref.current);
fitAddon.fit();
@ -158,7 +161,7 @@ export default () => {
return true;
});
}
}, [ terminal, connected ]);
}, [terminal, connected]);
useEventListener('resize', debounce(() => {
if (terminal.element) {
@ -196,11 +199,11 @@ export default () => {
});
}
};
}, [ connected, instance ]);
}, [connected, instance]);
return (
<div css={tw`text-xs font-mono relative`}>
<SpinnerOverlay visible={!connected} size={'large'}/>
<SpinnerOverlay visible={!connected} size={'large'} />
<div
css={[
tw`rounded-t p-2 bg-black w-full`,
@ -208,21 +211,21 @@ export default () => {
]}
style={{ minHeight: '16rem' }}
>
<TerminalDiv id={'terminal'} ref={ref}/>
<TerminalDiv id={'terminal'} ref={ref} />
</div>
{canSendCommands &&
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
<CommandInput
type={'text'}
placeholder={'Type a command...'}
aria-label={'Console command input.'}
disabled={!instance || !connected}
onKeyDown={handleCommandKeyDown}
/>
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
<CommandInput
type={'text'}
placeholder={'Type a command...'}
aria-label={'Console command input.'}
disabled={!instance || !connected}
onKeyDown={handleCommandKeyDown}
/>
</div>
</div>
</div>
}
</div>
);