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;
|
plugin: RendererPluginType;
|
||||||
onHeightChange: () => void;
|
onHeightChange: () => void;
|
||||||
initParams: RendererModelInitializeParams;
|
initParams: RendererModelInitializeParams;
|
||||||
|
isSelected: boolean;
|
||||||
},
|
},
|
||||||
{}
|
{}
|
||||||
> {
|
> {
|
||||||
|
@ -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()}>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user