diff --git a/packages/console/src/Console.tsx b/packages/console/src/Console.tsx index 69771acc2..5a5587b06 100644 --- a/packages/console/src/Console.tsx +++ b/packages/console/src/Console.tsx @@ -98,6 +98,7 @@ interface ConsoleState { // Height of the viewport of the console input and history consoleHeight: number; + // Scroll decoration is a drop shadow across the top border of the console isScrollDecorationShown: boolean; // Location of objects in the console history @@ -111,6 +112,7 @@ interface ConsoleState { csvPaste: string | null; dragError: string | null; csvUploadInProgress: boolean; + isStuckToBottom: boolean; isAutoLaunchPanelsEnabled: boolean; isPrintStdOutEnabled: boolean; isClosePanelsOnDisconnectEnabled: boolean; @@ -226,6 +228,7 @@ export class Console extends PureComponent { csvPaste: null, dragError: null, csvUploadInProgress: false, + isStuckToBottom: true, ...DEFAULT_SETTINGS, ...settings, @@ -251,6 +254,10 @@ export class Console extends PureComponent { if (props.objectMap !== prevProps.objectMap) { this.updateObjectMap(); } + + if (state.isStuckToBottom && !this.isAtBottom()) { + this.scrollConsoleHistoryToBottom(); + } } componentWillUnmount(): void { @@ -291,6 +298,15 @@ export class Console extends PureComponent { } } + isAtBottom(): boolean { + if (this.consoleHistoryScrollPane.current == null) { + return false; + } + const { scrollHeight, clientHeight, scrollTop } = + this.consoleHistoryScrollPane.current; + return Math.abs(scrollHeight - clientHeight - scrollTop) <= 1; + } + handleClearShortcut(event: Event): void { event.preventDefault(); event.stopPropagation(); @@ -330,7 +346,7 @@ export class Console extends PureComponent { consoleHistory: state.consoleHistory.concat(historyItem), }), () => { - this.scrollConsoleHistoryToBottom(true); + this.scrollConsoleHistoryToBottom(); } ); @@ -458,8 +474,6 @@ export class Console extends PureComponent { } processLogMessageQueue = throttle(() => { - this.scrollConsoleHistoryToBottom(); - this.setState(state => { log.debug2( 'processLogMessageQueue', @@ -517,8 +531,6 @@ export class Console extends PureComponent { historyItem.endTime = Date.now(); - this.scrollConsoleHistoryToBottom(); - // Update history to re-render items as necessary this.setState(state => { const consoleHistory = state.consoleHistory.concat(); @@ -639,13 +651,9 @@ export class Console extends PureComponent { }); } - scrollConsoleHistoryToBottom(force = false): void { + scrollConsoleHistoryToBottom(): void { const pane = this.consoleHistoryScrollPane.current; - assertNotNull(pane); - if ( - !force && - Math.abs(pane.scrollHeight - pane.clientHeight - pane.scrollTop) >= 1 - ) { + if (pane == null) { return; } @@ -657,14 +665,12 @@ export class Console extends PureComponent { handleScrollPaneScroll(): void { const scrollPane = this.consoleHistoryScrollPane.current; assertNotNull(scrollPane); - if ( - scrollPane.scrollTop > 0 && - scrollPane.scrollHeight > scrollPane.clientHeight - ) { - this.setState({ isScrollDecorationShown: true }); - } else { - this.setState({ isScrollDecorationShown: false }); - } + this.setState({ + isScrollDecorationShown: + scrollPane.scrollTop > 0 && + scrollPane.scrollHeight > scrollPane.clientHeight, + isStuckToBottom: this.isAtBottom(), + }); } handleToggleAutoLaunchPanels(): void { @@ -783,7 +789,7 @@ export class Console extends PureComponent { const history = consoleHistory.concat(historyItem); this.setState({ consoleHistory: history }); - this.scrollConsoleHistoryToBottom(true); + this.scrollConsoleHistoryToBottom(); this.updateKnownObjects(historyItem); openObject({ name: title, type: dh.VariableType.TABLE }); commandHistoryStorage.addItem(language, scope, title, { @@ -878,7 +884,7 @@ export class Console extends PureComponent { endTime: Date.now(), }; - this.scrollConsoleHistoryToBottom(true); + this.scrollConsoleHistoryToBottom(); this.setState(state => ({ consoleHistory: state.consoleHistory.concat(historyItem), @@ -926,7 +932,7 @@ export class Console extends PureComponent { this.consoleInput.current.setConsoleText(command, focus, execute); if (focus) { - this.scrollConsoleHistoryToBottom(true); + this.scrollConsoleHistoryToBottom(); } }