working on UI cleanups

2025-02-01 23:21:59 +01:00 · 2022-11-22 22:57:35 -08:00 · 2022-11-22 22:57:35 -08:00 · 3f710eec1d
commit 3f710eec1d
parent 5fa7aa52d3
5 changed files with 57 additions and 42 deletions
--- a/src/emain.ts
+++ b/src/emain.ts
@ -414,7 +414,7 @@ async function sleep(ms) {
    catch (e) {
        console.log(e.toString());
    }
-    await sleep(500);  // TODO remove this sleep, poll getClientData() in createMainWindow
+    await sleep(1000);  // TODO remove this sleep, poll getClientData() in createMainWindow
    await app.whenReady();
    await createMainWindowWrap();
    app.on('activate', () => {
--- a/src/main.tsx
+++ b/src/main.tsx
@ -208,9 +208,9 @@ class Prompt extends React.Component<{rptr : RemotePtrType, rstate : RemoteState

@mobxReact.observer
 class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> {
-    termLoaded : mobx.IObservableValue<boolean> = mobx.observable.box(false);
+    termLoaded : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "linecmd-term-loaded"});
    lineRef : React.RefObject<any> = React.createRef();
-    rtnStateDiff : mobx.IObservableValue<string> = mobx.observable.box(null);
+    rtnStateDiff : mobx.IObservableValue<string> = mobx.observable.box(null, {name: "linecmd-rtn-state-diff"});
    rtnStateDiffFetched : boolean = false;
    
    constructor(props) {
@ -417,8 +417,19 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
        let isFocused = isPhysicalFocused && (swFocusType == "cmd" || swFocusType == "cmd-fg");
        let isFgFocused = isPhysicalFocused && swFocusType == "cmd-fg";
        let isStatic = staticRender;
+        let rsdiff = this.rtnStateDiff.get();
+        // console.log("render", "#" + line.linenum, termHeight, usedRows, cmd.getStatus(), (this.rtnStateDiff.get() != null), (!cmd.isRunning() ? "cmd-done" : "running"));
+        let mainDivCn = cn(
+            "line",
+            "line-cmd",
+            {"focus": isFocused},
+            {"cmd-done": !cmd.isRunning()},
+            {"has-rtnstate": cmd.getRtnState()},
+        );
        return (
-            <div onClick={this.handleClick} className={cn("line", "line-cmd", {"focus": isFocused}, {"has-rtnstate": cmd.getRtnState()})} id={"line-" + getLineId(line)} ref={this.lineRef} style={{position: "relative"}} data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} data-cmdid={line.cmdid}>
+            <div className={mainDivCn} id={"line-" + getLineId(line)}
+                 ref={this.lineRef} onClick={this.handleClick}
+                 data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} data-cmdid={line.cmdid}>
                <div className={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused}, {"fg-focus": isFgFocused})}/>
                <div className="line-header">
                    <LineAvatar line={line} cmd={cmd}/>
@ -443,13 +454,13 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                    <div className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
                    <If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If>
                </div>
-                <If condition={cmd.getRtnState() && cmd.getStatus() == "done"}>
-                    <div className="cmd-rtnstate">
-                        <If condition={this.rtnStateDiff.get() == ""}>
+                <If condition={cmd.getRtnState()}>
+                    <div className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
+                        <If condition={rsdiff == null || rsdiff == ""}>
                            <div className="cmd-rtnstate-label">state unchanged</div>
                            <div className="cmd-rtnstate-sep"></div>
                        </If>
-                        <If condition={this.rtnStateDiff.get() != null && this.rtnStateDiff.get() != ""}>
+                        <If condition={rsdiff != null && rsdiff != ""}>
                            <div className="cmd-rtnstate-label">new state</div>
                            <div className="cmd-rtnstate-sep"></div>
                            <div className="cmd-rtnstate-diff">{this.rtnStateDiff.get()}</div>
@ -1778,7 +1789,7 @@ class CmdInput extends React.Component<{}, {}> {
 class LinesView extends React.Component<{sw : ScreenWindow, width : number, lines : LineType[]}, {}> {
    rszObs : any;
    linesRef : React.RefObject<any>;
-    staticRender : OV<boolean> = mobx.observable.box(true);
+    staticRender : OV<boolean> = mobx.observable.box(true, {name: "static-render"});
    lastOffsetHeight : number = 0;
    lastOffsetWidth : number = 0;
    ignoreNextScroll : boolean = false;
@ -1812,14 +1823,12 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
        let {sw} = this.props;
        let linesElem = this.linesRef.current;
        if (linesElem == null) {
-            sw.anchorLine = null;
-            sw.anchorOffset = 0;
+            sw.setAnchorFields(null, 0, "no-lines");
            return;
        }
        let lineElemArr = linesElem.querySelectorAll(".line");
        if (lineElemArr == null) {
-            sw.anchorLine = null;
-            sw.anchorOffset = 0;
+            sw.setAnchorFields(null, 0, "no-line");
            return;
        }
        let scrollTop = linesElem.scrollTop;
@ -1836,9 +1845,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
        if (anchorElem == null) {
            anchorElem = lineElemArr[0];
        }
-        sw.anchorLine = parseInt(anchorElem.dataset.linenum);
-        sw.anchorOffset = containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight);
-        // console.log("anchor", sw.anchorLine, sw.anchorOffset);
+        sw.setAnchorFields(parseInt(anchorElem.dataset.linenum), containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight), "computeAnchorLine");
    }

    computeVisibleMap() : void {
@ -1865,7 +1872,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
            for (let [k, v] of newMap) {
                let oldVal = this.visibleMap.get(k);
                if (oldVal == null) {
-                    oldVal = mobx.observable.box(v);
+                    oldVal = mobx.observable.box(v, {name: "lines-vis-map"});
                    this.visibleMap.set(k, oldVal);
                }
                if (oldVal.get() != v) {
@ -1988,8 +1995,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
        if (viewInfo == null) {
            return;
        }
-        sw.anchorLine = newLine;
-        sw.anchorOffset = viewInfo.anchorOffset;
+        sw.setAnchorFields(newLine, viewInfo.anchorOffset, "updateSelectedLine");
        let isFirst = (newLine == lines[0].linenum);
        let isLast = (newLine == lines[lines.length-1].linenum);
        if (viewInfo.botOffset > 0) {
@ -2010,7 +2016,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
            let key = String(lineNum);
            let visObj = this.visibleMap.get(key);
            if (visObj == null) {
-                visObj = mobx.observable.box(true);
+                visObj = mobx.observable.box(true, {name: "lines-vis-map"});
                this.visibleMap.set(key, visObj);
            }
            else {
@ -2069,7 +2075,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
            let key = String(lines[i].linenum);
            let visObs = this.visibleMap.get(key);
            if (visObs == null) {
-                this.visibleMap.set(key, mobx.observable.box(false));
+                this.visibleMap.set(key, mobx.observable.box(false, {name: "lines-vis-map"}));
            }
        }
        return (
@ -2089,7 +2095,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
    rszObs : any;
    windowViewRef : React.RefObject<any>;

-    width : mobx.IObservableValue<number> = mobx.observable.box(0);
+    width : mobx.IObservableValue<number> = mobx.observable.box(0, {name: "sw-view-width"});
    setWidth_debounced : (width : number) => void;

    constructor(props : any) {
@ -2590,7 +2596,7 @@ class Main extends React.Component<{}, {}> {
            <div id="main">
                <h1 className="title scripthaus-logo-small">
                    <div className="title-cursor">&#9608;</div>
-                    ScriptHaus
+                    prompt&gt;
                </h1>
                <div className="main-content">
                    <MainSideBar/>
--- a/src/model.ts
+++ b/src/model.ts
@ -84,6 +84,7 @@ type KeyModsType = {

 type ElectronApi = {
    getId : () => string,
+    getLocalServerStatus : () => boolean,
    restartLocalServer : () => boolean,
    onTCmd : (callback : (mods : KeyModsType) => void) => void,
    onICmd : (callback : (mods : KeyModsType) => void) => void,
@ -127,7 +128,7 @@ class Cmd {
        this.sessionId = cmd.sessionid;
        this.cmdId = cmd.cmdid;
        this.remote = cmd.remote;
-        this.data = mobx.observable.box(cmd, {deep: false});
+        this.data = mobx.observable.box(cmd, {deep: false, name: "cmd-data"});
    }

    setCmd(cmd : CmdDataType) {
@ -208,10 +209,10 @@ class Screen {
    constructor(sdata : ScreenDataType) {
        this.sessionId = sdata.sessionid;
        this.screenId = sdata.screenid;
-        this.name = mobx.observable.box(sdata.name);
-        this.screenIdx = mobx.observable.box(sdata.screenidx);
-        this.opts = mobx.observable.box(sdata.screenopts);
-        this.activeWindowId = mobx.observable.box(ces(sdata.activewindowid));
+        this.name = mobx.observable.box(sdata.name, {name: "screen-name"});
+        this.screenIdx = mobx.observable.box(sdata.screenidx, {name: "screen-screenidx"});
+        this.opts = mobx.observable.box(sdata.screenopts, {name: "screen-opts"});
+        this.activeWindowId = mobx.observable.box(ces(sdata.activewindowid), {name: "screen-activewindowid"});
        let swArr : ScreenWindow[] = [];
        let wins = sdata.windows || [];
        for (let i=0; i<wins.length; i++) {
@ -299,8 +300,7 @@ class ScreenWindow {
        this.selectedLine = mobx.observable.box(swdata.selectedline == 0 ? null : swdata.selectedline, {name: "selectedLine"});
        this.setAnchor_debounced = debounce(1000, this.setAnchor.bind(this));
        if (swdata.selectedline != 0) {
-            this.anchorLine = swdata.selectedline;
-            this.anchorOffset = 0;
+            this.setAnchorFields(swdata.selectedline, 0, "init");
        }
        this.termLineNumFocus = mobx.observable.box(0, {name: "termLineNumFocus"});
    }
@ -312,6 +312,12 @@ class ScreenWindow {
        return sprintf("%d:%d", this.anchorLine, this.anchorOffset);
    }

+    setAnchorFields(anchorLine : number, anchorOffset : number, reason : string) {
+        this.anchorLine = anchorLine;
+        this.anchorOffset = anchorOffset;
+        // console.log("set-anchor-fields", anchorLine, anchorOffset, reason);
+    }
+
    updateSelf(swdata : ScreenWindowType) {
        mobx.action(() => {
            this.name.set(swdata.name);
@ -431,7 +437,7 @@ class ScreenWindow {
            return;
        }
        let data = base64ToArray(ptyMsg.ptydata64);
-        term.updatePtyData(ptyMsg.ptypos, data);
+        term.updatePtyData(ptyMsg.ptypos, data, "from-sw");
    }

    isActive() : boolean {
@ -561,7 +567,7 @@ class ScreenWindow {
            if (usedRows != null) {
                return usedRows;
            }
-            return 2;
+            return (cmd.isRunning() ? 1 : 0);
        }
        return termWrap.usedRows.get();
    }
@ -1535,7 +1541,7 @@ class Model {
        this.ws.reconnect();
        this.inputModel = new InputModel();
        let isLocalServerRunning = getApi().getLocalServerStatus();
-        this.localServerRunning = mobx.observable.box(isLocalServerRunning);
+        this.localServerRunning = mobx.observable.box(isLocalServerRunning, {name: "model-local-server-running"});
        getApi().onTCmd(this.onTCmd.bind(this));
        getApi().onICmd(this.onICmd.bind(this));
        getApi().onLCmd(this.onLCmd.bind(this));
@ -1672,7 +1678,8 @@ class Model {
            let term = sw.getTermWrap(cmdId);
            if (term != null) {
                term.setIsRunning(cmdStatusIsRunning(newStatus));
-                setTimeout(() => term.updateUsedRows(true), 500);
+                term.updateUsedRows(true);
+                // setTimeout(() => term.updateUsedRows(true), 500);
            }
        }
    }
--- a/src/sh2.less
+++ b/src/sh2.less
@ -175,7 +175,7 @@ html, body, #main {

    .title-cursor {
        position: absolute;
-        left: 157px;
+        left: 112px;
        bottom: 12px;
        color: rgb(0, 177, 10);
        .mono-font(1rem);
@ -389,6 +389,7 @@ html, body, #main {
 .line.line-cmd {
    flex-direction: column;
    scroll-margin-bottom: 20px;
+    position: relative;
    
    .avatar {
        cursor: pointer;
--- a/src/term.ts
+++ b/src/term.ts
@ -45,7 +45,7 @@ class TermWrap {
    ptyPos : number = 0;
    reloading : boolean = false;
    dataUpdates : DataUpdate[] = [];
-    loadError : mobx.IObservableValue<boolean> = mobx.observable.box(false);
+    loadError : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "term-loaderror"});
    winSize : WindowSize;
    numParseErrors : number = 0;
    termSize : TermWinSize;
@ -62,11 +62,11 @@ class TermWrap {
        this.isRunning = opts.isRunning;
        if (this.flexRows) {
            this.atRowMax = false;
-            this.usedRows = mobx.observable.box(opts.usedRows ?? (opts.isRunning ? 2 : 0));
+            this.usedRows = mobx.observable.box(opts.usedRows ?? (opts.isRunning ? 1 : 0), {name: "term-usedrows"});
        }
        else {
            this.atRowMax = true;
-            this.usedRows = mobx.observable.box(opts.termOpts.rows);
+            this.usedRows = mobx.observable.box(opts.termOpts.rows, {name: "term-usedrows"});
        }
        if (opts.winSize == null) {
            this.termSize = {rows: opts.termOpts.rows, cols: opts.termOpts.cols};
@ -153,7 +153,7 @@ class TermWrap {
        if (termNumLines > term.rows) {
            return term.rows;
        }
-        let usedRows = (this.isRunning ? 2 : 0);
+        let usedRows = (this.isRunning ? 1 : 0);
        if (this.isRunning && termYPos >= usedRows) {
            usedRows = termYPos + 1;
        }
@ -259,9 +259,9 @@ class TermWrap {
            setTimeout(() => {
                this.reloading = false;
                this.ptyPos = ptyOffset;
-                this.updatePtyData(ptyOffset, new Uint8Array(buf));
+                this.updatePtyData(ptyOffset, new Uint8Array(buf), "reload-main");
                for (let i=0; i<this.dataUpdates.length; i++) {
-                    this.updatePtyData(this.dataUpdates[i].pos, this.dataUpdates[i].data);
+                    this.updatePtyData(this.dataUpdates[i].pos, this.dataUpdates[i].data, "reload-update-" + i);
                }
                this.dataUpdates = [];
            }, delayMs);
@ -270,7 +270,8 @@ class TermWrap {
        });
    }

-    updatePtyData(pos : number, data : Uint8Array) {
+    updatePtyData(pos : number, data : Uint8Array, reason? : string) {
+        // console.log("update-pty-data", pos, data.length, reason);
        if (this.terminal == null) {
            return;
        }