PE-74 and PE-54

pass isSelected (to prevent multiple scrolling).  also fix initial editorheight to prevent jitter (#19)
This commit is contained in:
sawka 2023-09-07 13:02:45 -07:00 committed by GitHub
parent 660795ea8f
commit aaaf7af8a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 6 deletions

View File

@ -33,6 +33,7 @@ class FullRenderer extends React.Component<
plugin: RendererPluginType;
onHeightChange: () => void;
initParams: RendererModelInitializeParams;
isSelected: boolean;
},
{}
> {

View File

@ -767,6 +767,7 @@ class LineCmd extends React.Component<
onHeightChange={this.handleHeightChange}
initParams={this.makeRendererModelInitializeParams()}
scrollToBringIntoViewport={this.scrollToBringIntoViewport}
isSelected={isSelected}
/>
</If>
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
@ -776,6 +777,7 @@ class LineCmd extends React.Component<
plugin={rendererPlugin}
onHeightChange={this.handleHeightChange}
initParams={this.makeRendererModelInitializeParams()}
isSelected={isSelected}
/>
</If>
<If condition={cmd.getRtnState()}>

View File

@ -249,7 +249,11 @@ input[type="checkbox"] {
}
.renderer-container.code-renderer {
margin-top: 10px;
.scroller {
padding-top: 10px;
padding-bottom: 15px;
}
.monaco-editor .monaco-editor-background {
background-color: rgba(255, 255, 255, 0.075) !important;
}

View File

@ -176,6 +176,7 @@ class SimpleBlobRenderer extends React.Component<
onHeightChange: () => void;
initParams: RendererModelInitializeParams;
scrollToBringIntoViewport: () => void;
isSelected: boolean;
},
{}
> {
@ -264,7 +265,7 @@ class SimpleBlobRenderer extends React.Component<
let simpleModel = model as SimpleBlobRendererModel;
let { festate, cmdstr, exitcode } = this.props.initParams.rawCmd;
return (
<div ref={this.wrapperDivRef}>
<div ref={this.wrapperDivRef} className="sr-wrapper">
<Comp
cwd={festate.cwd}
cmdstr={cmdstr}
@ -277,6 +278,7 @@ class SimpleBlobRenderer extends React.Component<
opts={simpleModel.opts}
savedHeight={simpleModel.savedHeight}
scrollToBringIntoViewport={this.props.scrollToBringIntoViewport}
isSelected={this.props.isSelected}
/>
</div>
);

View File

@ -26,6 +26,7 @@ class SourceCodeRenderer extends React.Component<
savedHeight: number;
scrollToBringIntoViewport: () => void;
lineState: LineStateType;
isSelected: boolean;
},
{
code: string;
@ -51,13 +52,14 @@ class SourceCodeRenderer extends React.Component<
constructor(props) {
super(props);
this.monacoEditor = null;
const editorHeight = Math.max(props.savedHeight - 25, 0); // must subtract the padding/margin to get the real editorHeight
this.state = {
code: null,
languages: [],
selectedLanguage: "",
isSave: false,
isClosed: false,
editorHeight: props.savedHeight,
editorHeight: editorHeight,
message: null,
};
}
@ -205,9 +207,14 @@ class SourceCodeRenderer extends React.Component<
let allowEditing = this.getAllowEditing();
if (!allowEditing) {
const noOfLines = Math.max(this.state.code.split("\n").length, 5);
_editorHeight = Math.min(noOfLines * GlobalModel.termFontSize.get() * 1.5 + 10, fullWindowHeight);
const lineHeight = Math.ceil(GlobalModel.termFontSize.get() * 1.5);
_editorHeight = Math.min(noOfLines * lineHeight + 10, fullWindowHeight);
}
this.setState({ editorHeight: _editorHeight }, () => this.props.scrollToBringIntoViewport());
this.setState({ editorHeight: _editorHeight }, () => {
if (this.props.isSelected) {
this.props.scrollToBringIntoViewport();
}
});
};
getAllowEditing(): boolean {
@ -243,7 +250,7 @@ class SourceCodeRenderer extends React.Component<
let allowEditing = this.getAllowEditing();
return (
<div className="renderer-container code-renderer">
<div className="scroller" style={{ maxHeight: opts.maxSize.height, paddingBottom: "15px" }}>
<div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
<Editor
theme="hc-black"
height={this.state.editorHeight}