Do not modify screen buffer storage to add a cursor.

Author: vlad-shatskyi

src/ANSIParser.ts

@@ -565,6 +565,6 @@ function or1(value: number | undefined) {
 
 // TODO: Move to
 function logPosition(buffer: ScreenBuffer) {
-    const position = buffer.cursorPosition;
-    debug(`%crow: ${position.row}\tcolumn: ${position.column}\t value: ${buffer.at(position)}`, "color: green");
+    const position = {row: buffer.cursorRow, column: buffer.cursorColumn};
+    debug(`%crow: ${position.row}\tcolumn: ${buffer.cursorColumn}\t value: ${buffer.at(position)}`, "color: green");
 }

src/ScreenBuffer.ts

@@ -91,36 +91,12 @@ export class ScreenBuffer extends events.EventEmitter {
         this._attributes = attributesFlyweight({...this._attributes, ...attributes});
     }
 
-    toRenderable(status: e.Status, fromStorage = this.storage): List<List<Char>> {
-        let storage = fromStorage;
-
-        if (status === e.Status.InProgress && (this._showCursor || this._blinkCursor)) {
-            const cursorRow = this.cursorRow - (this.storage.size - fromStorage.size);
-            const cursorColumn = this.cursorColumn;
-
-            const cursorCoordinates = [cursorRow, cursorColumn];
-
-            if (!storage.get(cursorRow)) {
-                storage = storage.set(cursorRow, List<Char>(Array(cursorColumn).fill(Char.empty)));
-            }
-
-
-            if (!storage.getIn(cursorCoordinates)) {
-                storage = storage.setIn(cursorCoordinates, Char.empty);
-            }
-
-            let char: Char = storage.getIn(cursorCoordinates);
-            storage = storage.setIn(
-                cursorCoordinates,
-                Char.flyweight(char.toString(), {...char.attributes, cursor: true}),
-            );
-        }
-
-        return storage;
+    toRenderable(fromStorage = this.storage): List<List<Char>> {
+        return fromStorage;
     }
 
-    toCutRenderable(status: e.Status): List<List<Char>> {
-        return this.toRenderable(status, <List<List<Char>>>(this.storage.takeLast(ScreenBuffer.hugeOutputThreshold)));
+    toCutRenderable(): List<List<Char>> {
+        return this.toRenderable(<List<List<Char>>>(this.storage.takeLast(ScreenBuffer.hugeOutputThreshold)));
     }
 
     toLines(): string[] {

src/views/BufferComponent.tsx

@@ -40,6 +40,7 @@ class Cut extends React.Component<CutProps, CutState> {
 }
 interface RowProps {
     row: List<Char>;
+    hasCursor: boolean;
     status: Status;
     job: Job;
 }
@@ -48,11 +49,22 @@ const charGrouper = (a: Char, b: Char) => a.attributes === b.attributes;
 
 class RowComponent extends React.Component<RowProps, {}> {
     shouldComponentUpdate(nextProps: RowProps) {
-        return this.props.row !== nextProps.row || this.props.status !== nextProps.status;
+        return this.props.row !== nextProps.row ||
+            this.props.status !== nextProps.status ||
+            this.props.hasCursor !== nextProps.hasCursor;
     }
 
     render() {
-        const rowWithoutHoles = this.props.row.toArray().map(char => char || Char.empty);
+        const rowWithoutHoles = this.props.row.toArray().map((char, index) => {
+            const char2 = char || Char.empty;
+            const attributes = (this.props.hasCursor && index === this.props.job.screenBuffer.cursorColumn) ?
+                {...char2.attributes, cursor: true} :
+                char2.attributes;
+
+            return Char.flyweight(char2.toString(), attributes);
+
+        });
+
         const charGroups = groupWhen(charGrouper, rowWithoutHoles).map((charGroup: Char[], index: number) =>
             <CharGroupComponent job={this.props.job} group={charGroup} key={index}/>,
         );
@@ -78,14 +90,17 @@ export class BufferComponent extends React.Component<Props, State> {
     }
 
     render() {
+        const buffer = this.props.job.screenBuffer;
+
         return (
             <div className="output"
                  style={css.output(this.props.job.screenBuffer.activeScreenBufferType, this.props.job.status)}>
                 {this.shouldCutOutput ? <Cut job={this.props.job} clickHandler={() => this.setState({ expandButtonPressed: true })}/> : undefined}
-                {this.renderableRows.map((row, index) =>
+                {this.renderableRows.map((row, index: number) =>
                     <RowComponent
                         key={index}
                         row={row || List<Char>()}
+                        hasCursor={index === buffer.cursorRow && this.props.job.status === Status.InProgress && (buffer._showCursor || buffer._blinkCursor)}
                         status={this.props.job.status}
                         job={this.props.job}/>,
                 )}
@@ -98,6 +113,6 @@ export class BufferComponent extends React.Component<Props, State> {
     }
 
     private get renderableRows(): List<List<Char>> {
-        return this.shouldCutOutput ? this.props.job.screenBuffer.toCutRenderable(this.props.job.status) : this.props.job.screenBuffer.toRenderable(this.props.job.status);
+        return this.shouldCutOutput ? this.props.job.screenBuffer.toCutRenderable() : this.props.job.screenBuffer.toRenderable();
     }
 }