removelines and resize width

src/sh2.less

@@ -3211,6 +3211,7 @@ body.prompt-webshare #main {
 
         .web-screen-view {
             height: 100%;
+            width: 100%;
             flex-grow: 1;
             display: flex;
             flex-direction: column;

src/types.ts

@@ -551,6 +551,7 @@ type WebScreenUpdate = {
     lines : WebLine[],
     cmds : WebCmd[],
     ptydata : PtyDataUpdate[],
+    removedlines : string[],
 };
 
 type WebShareWSMessage = {

src/webshare-elems.tsx

@@ -12,6 +12,7 @@ import {PluginModel} from "./plugins";
 import * as lineutil from "./lineutil";
 import * as util from "./util";
 import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./textmeasure";
+import {debounce, throttle} from "throttle-debounce";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
@@ -21,6 +22,8 @@ type OMap<K,V> = mobx.ObservableMap<K,V>;
 // TODO bug with finishing up the ptydata
 // TODO bug with ptydata late -- not updating usedrows
 // TODO scroll screen when new cmds arrive (selection)
+// TODO archived should delete line
+// TODO implement linedel
 
 function makeFullRemoteRef(ownerName : string, remoteRef : string, name : string) : string {
     if (isBlank(ownerName) && isBlank(name)) {
@@ -112,7 +115,7 @@ class LineAvatar extends React.Component<{line : T.WebLine, cmd : T.WebCmd}, {}>
 }
 
 @mobxReact.observer
-class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean}, {}> {
+class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean, width: number}, {}> {
     isCmdExpanded : OV<boolean> = mobx.observable.box(false, {name: "cmd-expanded"});
     isOverflow : OV<boolean> = mobx.observable.box(false, {name: "line-overflow"});
     cmdTextRef : React.RefObject<any> = React.createRef();
@@ -209,6 +212,10 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         let rendererType = lineutil.getRendererType(line);
         let mainCn = cn("web-line line line-cmd", {"top-border": topBorder});
         let visObs = mobx.observable.box(true, {name: "visObs"});
+        let width = this.props.width;
+        if (width == 0) {
+            width = 1024;
+        }
         return (
             <div className={mainCn}>
                 <div key="focus" className={cn("focus-indicator", {"selected active": isSelected})}/>
@@ -216,7 +223,7 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
                     <LineAvatar line={line} cmd={cmd}/>
                     {this.renderMetaWrap()}
                 </div>
-                <TerminalRenderer line={line} cmd={cmd} width={1024} staticRender={false} visible={visObs} onHeightChange={this.handleHeightChange}/>
+                <TerminalRenderer line={line} cmd={cmd} width={width} staticRender={false} visible={visObs} onHeightChange={this.handleHeightChange}/>
             </div>
         );
     }
@@ -358,7 +365,7 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
 }
 
 @mobxReact.observer
-class WebLineView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean}, {}> {
+class WebLineView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean, width : number}, {}> {
     render() {
         let {line} = this.props;
         if (line.linetype == "text") {
@@ -375,6 +382,56 @@ class WebLineView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, top
 
 @mobxReact.observer
 class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> {
+    viewRef : React.RefObject<any> = React.createRef();
+    width : OV<number> = mobx.observable.box(0, {name: "webScreenView-width"});
+    rszObs : ResizeObserver;
+    handleResize_debounced : (entries : any) => void;
+
+    constructor(props : any) {
+        super(props);
+        this.handleResize_debounced = debounce(1000, this.handleResize.bind(this));
+    }
+
+    componentDidMount() : void {
+        if (this.viewRef.current != null) {
+            let linesElem = this.viewRef.current;
+            this.rszObs = new ResizeObserver(this.handleResize_debounced.bind(this));
+            this.rszObs.observe(linesElem);
+            let width = linesElem.offsetWidth;
+            if (width > 0) {
+                mobx.action(() => {
+                    this.width.set(width);
+                })();
+            }
+        }
+    }
+
+    handleResize(entries : any) : void {
+        let linesElem = this.viewRef.current;
+        if (linesElem == null) {
+            return;
+        }
+        let width = linesElem.offsetWidth;
+        let height = linesElem.offsetHeight;
+        if (width != this.width.get()) {
+            WebShareModel.resizeWindow({width: width, height: height});
+            console.log("width-update", width);
+            mobx.action(() => {
+                this.width.set(width);
+            })();
+        }
+    }
+
+    renderEmpty() : any {
+        return (
+            <div className="web-screen-view" ref={this.viewRef}>
+                <div className="web-lines lines">
+                    <div key="spacer" className="lines-spacer"></div>
+                </div>
+            </div>
+        );
+    }
+    
     render() {
         let {screen} = this.props;
         let lines = screen.lines ?? [];
@@ -388,6 +445,10 @@ class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> {
         let todayStr = util.getTodayStr();
         let yesterdayStr = util.getYesterdayStr();
         let prevDateStr : string = null;
+        let width = this.width.get();
+        if (width == 0) {
+            return this.renderEmpty();
+        }
         for (let idx=0; idx<lines.length; idx++) {
             let line = lines[idx];
             let lineNumStr = String(line.linenum);
@@ -402,13 +463,13 @@ class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> {
                 lineElements.push(sepElem);
             }
             let topBorder = (dateSepStr == null) && (idx != 0);
-            let lineElem = <WebLineView key={line.lineid} line={line} cmd={cmdMap[line.lineid]} topBorder={topBorder}/>;
+            let lineElem = <WebLineView key={line.lineid} line={line} cmd={cmdMap[line.lineid]} topBorder={topBorder} width={width}/>;
             lineElements.push(lineElem);
         }
         return (
-            <div className="web-screen-view">
+            <div className="web-screen-view" ref={this.viewRef}>
                 <div className="web-lines lines">
-                    <div className="lines-spacer"></div>
+                    <div key="spacer" className="lines-spacer"></div>
                     {lineElements}
                 </div>
             </div>

src/webshare-model.ts

@@ -58,6 +58,14 @@ class WebShareModelClass {
         return 12;
     }
 
+    resizeWindow(winSize : T.WindowSize) : void {
+        let cols = windowWidthToCols(winSize.width, this.getTermFontSize());
+        for (let lineId in this.terminals) {
+            let termWrap = this.terminals[lineId];
+            termWrap.resizeCols(cols);
+        }
+    }
+
     mergeLine(fullScreen : T.WebFullScreen, newLine : T.WebLine) {
         for (let i=0; i<fullScreen.lines.length; i++) {
             let line = fullScreen.lines[i];
@@ -73,10 +81,40 @@ class WebShareModelClass {
         fullScreen.lines.push(newLine);
     }
 
+    removeLine(fullScreen : T.WebFullScreen, lineId : string) {
+        for (let i=0; i<fullScreen.lines.length; i++) {
+            let line = fullScreen.lines[i];
+            if (line.lineid == lineId) {
+                fullScreen.lines.splice(i, 1);
+                break;
+            }
+        }
+        for (let i=0; i<fullScreen.cmds.length; i++) {
+            let cmd = fullScreen.cmds[i];
+            if (cmd.lineid == lineId) {
+                fullScreen.cmds.splice(i, 1);
+                break;
+            }
+        }
+        this.unloadRenderer(lineId);
+    }
+
+    setCmdDone(lineId : string) : void {
+        let termWrap = this.getTermWrap(lineId);
+        if (termWrap != null) {
+            termWrap.cmdDone();
+        }
+    }
+
     mergeCmd(fullScreen : T.WebFullScreen, newCmd : T.WebCmd) {
         for (let i=0; i<fullScreen.cmds.length; i++) {
             let cmd = fullScreen.cmds[i];
             if (cmd.lineid == newCmd.lineid) {
+                let wasRunning = lineutil.cmdStatusIsRunning(cmd.status);
+                let isRunning = lineutil.cmdStatusIsRunning(newCmd.status);
+                if (wasRunning && !isRunning) {
+                    setTimeout(() => this.setCmdDone(cmd.lineid), 300);
+                }
                 fullScreen.cmds[i] = newCmd;
                 return;
             }
@@ -111,7 +149,14 @@ class WebShareModelClass {
                     if (termWrap == null) {
                         continue;
                     }
-                    termWrap.receiveData(data.ptypos, base64ToArray(data.data));
+                    let dataArr = base64ToArray(data.data);
+                    termWrap.receiveData(data.ptypos, dataArr);
+                    console.log("receivedata", data.lineid, data.ptypos + dataArr.length);
+                }
+            }
+            if (msg.removedlines != null && msg.removedlines.length > 0) {
+                for (let lineid of msg.removedlines) {
+                    this.removeLine(fullScreen, lineid);
                 }
             }
         })();