PE-74 and PE-54

pass isSelected (to prevent multiple scrolling). also fix initial editorheight to prevent jitter (#19)
wavetermdev · Sep 7, 2023 · aaaf7af · aaaf7af
1 parent 660795e
commit aaaf7af
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/src/fullrenderer.tsx b/src/fullrenderer.tsx
@@ -33,6 +33,7 @@ class FullRenderer extends React.Component<
         plugin: RendererPluginType;
         onHeightChange: () => void;
         initParams: RendererModelInitializeParams;
+        isSelected: boolean;
     },
     {}
 > {

diff --git a/src/linecomps.tsx b/src/linecomps.tsx
@@ -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()}>

diff --git a/src/prompt.less b/src/prompt.less
@@ -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;
     }

diff --git a/src/simplerenderer.tsx b/src/simplerenderer.tsx
@@ -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>
         );

diff --git a/src/view/code.tsx b/src/view/code.tsx
@@ -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}