Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-01 23:21:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

use refs

Browse Source
This commit is contained in:
sawka 2022-10-07 11:32:58 -07:00
parent ab31aecf90
commit 82e88d2f61
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/main.tsx
View File

@ -1666,6 +1666,8 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
interObs : IntersectionObserver; interObs : IntersectionObserver;
randomId : string; randomId : string;
lastHeight : number = null; lastHeight : number = null;
linesRef : React.RefObject<any>;
windowViewRef : React.RefObject<any>;
width : mobx.IObservableValue<number> = mobx.observable.box(0); width : mobx.IObservableValue<number> = mobx.observable.box(0);
setWidth_debounced : (width : number) => void; setWidth_debounced : (width : number) => void;
@ -1673,6 +1675,8 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
constructor(props : any) { constructor(props : any) {
super(props); super(props);
this.setWidth_debounced = debounce(1000, this.setWidth.bind(this)); this.setWidth_debounced = debounce(1000, this.setWidth.bind(this));
this.linesRef = React.createRef();
this.windowViewRef = React.createRef();
} }
setWidth(width : number) : void { setWidth(width : number) : void {
@ -1688,7 +1692,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
} }
scrollToBottom(reason : string) { scrollToBottom(reason : string) {
let elem = document.getElementById(this.getLinesDOMId()); let elem = this.linesRef.current;
if (elem == null) { if (elem == null) {
return; return;
} }
@ -1712,8 +1716,16 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
// console.log("scroll-handler (sw)>", atBottom, target.scrollTop, target.scrollHeight, event); // console.log("scroll-handler (sw)>", atBottom, target.scrollTop, target.scrollHeight, event);
} }
getSnapshotBeforeUpdate(prevProps, prevState) : {scrollTop: number, scrollHeight: number} {
let linesElem = this.linesRef.current;
if (linesElem == null) {
return {scrollTop: 0, scrollHeight: 0};
}
return {scrollTop: linesElem.scrollTop, scrollHeight: linesElem.scrollHeight};
}
componentDidMount() { componentDidMount() {
let elem = document.getElementById(this.getLinesDOMId()); let elem = this.linesRef.current;
if (elem != null) { if (elem != null) {
this.mutObs = new MutationObserver(this.handleDomMutation.bind(this)); this.mutObs = new MutationObserver(this.handleDomMutation.bind(this));
this.mutObs.observe(elem, {childList: true}); this.mutObs.observe(elem, {childList: true});
@ -1728,7 +1740,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
threshold: 0.0, threshold: 0.0,
}); });
} }
let wvElem = document.getElementById(this.getWindowViewDOMId()); let wvElem = this.windowViewRef.current;
if (wvElem != null) { if (wvElem != null) {
let width = wvElem.offsetWidth; let width = wvElem.offsetWidth;
this.setWidth(width); this.setWidth(width);
@ -1786,10 +1798,6 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
return win; return win;
} }
getLinesDOMId() {
return windowLinesDOMId(this.getWindowId());
}
@boundMethod @boundMethod
handleTermResize(e : any) { handleTermResize(e : any) {
let {sw} = this.props; let {sw} = this.props;
@ -1808,18 +1816,14 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
return sw.windowId; return sw.windowId;
} }
getWindowViewDOMId() {
return sprintf("window-view-%s", this.getWindowId());
}
renderError(message : string) { renderError(message : string) {
let {sw} = this.props; let {sw} = this.props;
return ( return (
<div className="window-view" style={this.getWindowViewStyle()} id={this.getWindowViewDOMId()} data-windowid={sw.windowId}> <div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef} data-windowid={sw.windowId}>
<div key="window-tag" className="window-tag"> <div key="window-tag" className="window-tag">
<span>{sw.name.get()}{sw.shouldFollow.get() ? "*" : ""}</span> <span>{sw.name.get()}{sw.shouldFollow.get() ? "*" : ""}</span>
</div> </div>
<div key="lines" className="lines" id={this.getLinesDOMId()}></div> <div key="lines" className="lines" id={windowLinesDOMId(sw.windowId)} ref={this.linesRef}></div>
<div key="window-empty" className="window-empty"> <div key="window-empty" className="window-empty">
<div>{message}</div> <div>{message}</div>
</div> </div>
@ -1849,7 +1853,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
} }
let isActive = sw.isActive(); let isActive = sw.isActive();
return ( return (
<div className="window-view" style={this.getWindowViewStyle()} id={this.getWindowViewDOMId()}> <div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef}>
<div key="window-tag" className={cn("window-tag", {"is-active": isActive})}> <div key="window-tag" className={cn("window-tag", {"is-active": isActive})}>
<span> <span>
{sw.name.get()} {sw.name.get()}
@ -1858,7 +1862,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
</If> </If>
</span> </span>
</div> </div>
<div key="lines" className="lines" onScroll={this.scrollHandler} id={this.getLinesDOMId()} style={linesStyle}> <div key="lines" className="lines" onScroll={this.scrollHandler} style={linesStyle} ref={this.linesRef} id={windowLinesDOMId(sw.windowId)}>
<div className="lines-spacer"></div> <div className="lines-spacer"></div>
<For each="line" of={win.lines} index="idx"> <For each="line" of={win.lines} index="idx">
<Line key={line.lineid} line={line} sw={sw} width={this.width.get()} interObs={this.interObs} initVis={idx > win.lines.length-1-7}/> <Line key={line.lineid} line={line} sw={sw} width={this.width.get()} interObs={this.interObs} initVis={idx > win.lines.length-1-7}/>

1
src/sh2.less
View File

@ -693,6 +693,7 @@ body .xterm .xterm-viewport {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
padding: 20px 20px 20px 20px; padding: 20px 20px 20px 20px;
height: 108px;
&.has-info { &.has-info {
padding-top: 5px; padding-top: 5px;