Skip to content
This repository has been archived by the owner on Apr 28, 2024. It is now read-only.

Commit

Permalink
fixed console scrolling issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@paraswaykole
paraswaykole committed Aug 5, 2023
1 parent 8f31ca1 commit a6575dc
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 12 deletions.
4 changes: 4 additions & 0 deletions frontend/desktop/src/components/dbfragments/console.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,8 @@
left: 0;
}

.consoleend {
height: 100px;
}

}
20 changes: 14 additions & 6 deletions frontend/desktop/src/components/dbfragments/console.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {

const currentTab: Tab = useContext(TabContext)!

const consoleEndRef = useRef<HTMLSpanElement>(null)
const consoleRef = useRef<HTMLDivElement>(null)
const consoleEndRef = useRef<HTMLDivElement>(null)

const dbConnection = useAppSelector(selectDBConnection)
const output = useAppSelector(selectBlocks)
Expand All @@ -27,7 +28,7 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {
}, [dbConnection])

useEffect(() => {
consoleEndRef.current?.scrollIntoView({ behavior: 'smooth' })
scrollToBottom("smooth")
}, [output])

const confirmInput = () => {
Expand All @@ -36,21 +37,27 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {
}

const focus = (e: any) => {
if (e.target.id === "console") {
if (consoleRef.current?.contains(e.target)) {
setFocus(Math.random())
}
}

return <div className={styles.console + " " + (currentTab.isActive ? "db-tab-active" : "db-tab")} id="console" onClick={focus}>
const scrollToBottom = (behavior: ScrollBehavior) => {
const mainContentDiv = consoleRef.current?.parentNode as HTMLDivElement
if (mainContentDiv.scrollTop !== consoleEndRef.current?.offsetTop)
mainContentDiv.scrollTo({ top: consoleEndRef.current?.offsetTop, behavior })
}

return <div className={styles.console + " " + (currentTab.isActive ? "db-tab-active" : "db-tab")} id="console" ref={consoleRef} onClick={focus}>
<OutputBlock block={{
text: "Start typing command and press enter to run it.\nType 'help' for more info on console.",
cmd: false
}} />
{output.map((block, idx) => {
return <OutputBlock block={block} key={idx} />
})}
<PromptInputWithRef onChange={setInput} isActive={currentTab.isActive} nfocus={nfocus} confirmInput={confirmInput} history={history} />
<span ref={consoleEndRef}></span>
<PromptInputWithRef onChange={setInput} isActive={currentTab.isActive} nfocus={nfocus} scrollToBottom={scrollToBottom} confirmInput={confirmInput} history={history} />
<div id="consoleend" className={styles.consoleend} ref={consoleEndRef}></div>
</div>
}

Expand All @@ -68,6 +75,7 @@ const PromptInputWithRef = (props: any) => {
const [pointer, setPointer] = useState<number>(-1)
useEffect(() => {
if (props.isActive) {
props.scrollToBottom("instant")
inputRef.current?.focus()
}
}, [props.isActive, props.nfocus])
Expand Down
4 changes: 4 additions & 0 deletions frontend/server/src/components/dbfragments/console.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,8 @@
left: 0;
}

.consoleend {
height: 100px;
}

}
20 changes: 14 additions & 6 deletions frontend/server/src/components/dbfragments/console.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {

const currentTab: Tab = useContext(TabContext)!

const consoleEndRef = useRef<HTMLSpanElement>(null)
const consoleRef = useRef<HTMLDivElement>(null)
const consoleEndRef = useRef<HTMLDivElement>(null)

const dbConnection = useAppSelector(selectDBConnection)
const output = useAppSelector(selectBlocks)
Expand All @@ -27,7 +28,7 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {
}, [dbConnection])

useEffect(() => {
consoleEndRef.current?.scrollIntoView({ behavior: 'smooth' })
scrollToBottom("smooth")
}, [output])

const confirmInput = () => {
Expand All @@ -36,21 +37,27 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {
}

const focus = (e: any) => {
if (e.target.id === "console") {
if (consoleRef.current?.contains(e.target)) {
setFocus(Math.random())
}
}

return <div className={styles.console + " " + (currentTab.isActive ? "db-tab-active" : "db-tab")} id="console" onClick={focus}>
const scrollToBottom = (behavior: ScrollBehavior) => {
const mainContentDiv = consoleRef.current?.parentNode as HTMLDivElement
if (mainContentDiv.scrollTop !== consoleEndRef.current?.offsetTop)
mainContentDiv.scrollTo({ top: consoleEndRef.current?.offsetTop, behavior })
}

return <div className={styles.console + " " + (currentTab.isActive ? "db-tab-active" : "db-tab")} id="console" ref={consoleRef} onClick={focus}>
<OutputBlock block={{
text: "Start typing command and press enter to run it.\nType 'help' for more info on console.",
cmd: false
}} />
{output.map((block, idx) => {
return <OutputBlock block={block} key={idx} />
})}
<PromptInputWithRef onChange={setInput} isActive={currentTab.isActive} nfocus={nfocus} confirmInput={confirmInput} history={history} />
<span ref={consoleEndRef}></span>
<PromptInputWithRef onChange={setInput} isActive={currentTab.isActive} nfocus={nfocus} scrollToBottom={scrollToBottom} confirmInput={confirmInput} history={history} />
<div id="consoleend" className={styles.consoleend} ref={consoleEndRef}></div>
</div>
}

Expand All @@ -69,6 +76,7 @@ const PromptInputWithRef = (props: any) => {
const [pointer, setPointer] = useState<number>(-1)
useEffect(() => {
if (props.isActive) {
props.scrollToBottom("instant")
inputRef.current?.focus()
}
}, [props.isActive, props.nfocus])
Expand Down

0 comments on commit a6575dc

Please sign in to comment.