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; plugin: RendererPluginType;
onHeightChange: () => void; onHeightChange: () => void;
initParams: RendererModelInitializeParams; initParams: RendererModelInitializeParams;
isSelected: boolean;
}, },
{} {}
> { > {

View File

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

View File

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

View File

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

View File

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