mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-01 23:21:59 +01:00
PE-74 and PE-54
pass isSelected (to prevent multiple scrolling). also fix initial editorheight to prevent jitter (#19)
This commit is contained in:
parent
660795ea8f
commit
aaaf7af8a1
@ -33,6 +33,7 @@ class FullRenderer extends React.Component<
|
||||
plugin: RendererPluginType;
|
||||
onHeightChange: () => void;
|
||||
initParams: RendererModelInitializeParams;
|
||||
isSelected: boolean;
|
||||
},
|
||||
{}
|
||||
> {
|
||||
|
@ -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()}>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user