Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

working on UI cleanups

Browse Source
This commit is contained in:
sawka 2022-11-22 22:57:35 -08:00
parent 5fa7aa52d3
commit 3f710eec1d
5 changed files with 57 additions and 42 deletions

2
src/emain.ts
View File

@ -414,7 +414,7 @@ async function sleep(ms) {
catch (e) { catch (e) {
console.log(e.toString()); 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 app.whenReady();
await createMainWindowWrap(); await createMainWindowWrap();
app.on('activate', () => { app.on('activate', () => {

50
src/main.tsx
View File

@ -208,9 +208,9 @@ class Prompt extends React.Component<{rptr : RemotePtrType, rstate : RemoteState
@mobxReact.observer @mobxReact.observer
class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> { 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(); 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; rtnStateDiffFetched : boolean = false;
constructor(props) { 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 isFocused = isPhysicalFocused && (swFocusType == "cmd" || swFocusType == "cmd-fg");
let isFgFocused = isPhysicalFocused && swFocusType == "cmd-fg"; let isFgFocused = isPhysicalFocused && swFocusType == "cmd-fg";
let isStatic = staticRender; 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 ( 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={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused}, {"fg-focus": isFgFocused})}/>
<div className="line-header"> <div className="line-header">
<LineAvatar line={line} cmd={cmd}/> <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> <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> <If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If>
</div> </div>
<If condition={cmd.getRtnState() && cmd.getStatus() == "done"}> <If condition={cmd.getRtnState()}>
<div className="cmd-rtnstate"> <div className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
<If condition={this.rtnStateDiff.get() == ""}> <If condition={rsdiff == null || rsdiff == ""}>
<div className="cmd-rtnstate-label">state unchanged</div> <div className="cmd-rtnstate-label">state unchanged</div>
<div className="cmd-rtnstate-sep"></div> <div className="cmd-rtnstate-sep"></div>
</If> </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-label">new state</div>
<div className="cmd-rtnstate-sep"></div> <div className="cmd-rtnstate-sep"></div>
<div className="cmd-rtnstate-diff">{this.rtnStateDiff.get()}</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[]}, {}> { class LinesView extends React.Component<{sw : ScreenWindow, width : number, lines : LineType[]}, {}> {
rszObs : any; rszObs : any;
linesRef : React.RefObject<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; lastOffsetHeight : number = 0;
lastOffsetWidth : number = 0; lastOffsetWidth : number = 0;
ignoreNextScroll : boolean = false; ignoreNextScroll : boolean = false;
@ -1812,14 +1823,12 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
let {sw} = this.props; let {sw} = this.props;
let linesElem = this.linesRef.current; let linesElem = this.linesRef.current;
if (linesElem == null) { if (linesElem == null) {
sw.anchorLine = null; sw.setAnchorFields(null, 0, "no-lines");
sw.anchorOffset = 0;
return; return;
} }
let lineElemArr = linesElem.querySelectorAll(".line"); let lineElemArr = linesElem.querySelectorAll(".line");
if (lineElemArr == null) { if (lineElemArr == null) {
sw.anchorLine = null; sw.setAnchorFields(null, 0, "no-line");
sw.anchorOffset = 0;
return; return;
} }
let scrollTop = linesElem.scrollTop; let scrollTop = linesElem.scrollTop;
@ -1836,9 +1845,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
if (anchorElem == null) { if (anchorElem == null) {
anchorElem = lineElemArr[0]; anchorElem = lineElemArr[0];
} }
sw.anchorLine = parseInt(anchorElem.dataset.linenum); sw.setAnchorFields(parseInt(anchorElem.dataset.linenum), containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight), "computeAnchorLine");
sw.anchorOffset = containerBottom - (anchorElem.offsetTop + anchorElem.offsetHeight);
// console.log("anchor", sw.anchorLine, sw.anchorOffset);
} }
computeVisibleMap() : void { computeVisibleMap() : void {
@ -1865,7 +1872,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
for (let [k, v] of newMap) { for (let [k, v] of newMap) {
let oldVal = this.visibleMap.get(k); let oldVal = this.visibleMap.get(k);
if (oldVal == null) { if (oldVal == null) {
oldVal = mobx.observable.box(v); oldVal = mobx.observable.box(v, {name: "lines-vis-map"});
this.visibleMap.set(k, oldVal); this.visibleMap.set(k, oldVal);
} }
if (oldVal.get() != v) { if (oldVal.get() != v) {
@ -1988,8 +1995,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
if (viewInfo == null) { if (viewInfo == null) {
return; return;
} }
sw.anchorLine = newLine; sw.setAnchorFields(newLine, viewInfo.anchorOffset, "updateSelectedLine");
sw.anchorOffset = viewInfo.anchorOffset;
let isFirst = (newLine == lines[0].linenum); let isFirst = (newLine == lines[0].linenum);
let isLast = (newLine == lines[lines.length-1].linenum); let isLast = (newLine == lines[lines.length-1].linenum);
if (viewInfo.botOffset > 0) { if (viewInfo.botOffset > 0) {
@ -2010,7 +2016,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
let key = String(lineNum); let key = String(lineNum);
let visObj = this.visibleMap.get(key); let visObj = this.visibleMap.get(key);
if (visObj == null) { if (visObj == null) {
visObj = mobx.observable.box(true); visObj = mobx.observable.box(true, {name: "lines-vis-map"});
this.visibleMap.set(key, visObj); this.visibleMap.set(key, visObj);
} }
else { else {
@ -2069,7 +2075,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
let key = String(lines[i].linenum); let key = String(lines[i].linenum);
let visObs = this.visibleMap.get(key); let visObs = this.visibleMap.get(key);
if (visObs == null) { if (visObs == null) {
this.visibleMap.set(key, mobx.observable.box(false)); this.visibleMap.set(key, mobx.observable.box(false, {name: "lines-vis-map"}));
} }
} }
return ( return (
@ -2089,7 +2095,7 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> {
rszObs : any; rszObs : any;
windowViewRef : React.RefObject<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; setWidth_debounced : (width : number) => void;
constructor(props : any) { constructor(props : any) {
@ -2590,7 +2596,7 @@ class Main extends React.Component<{}, {}> {
<div id="main"> <div id="main">
<h1 className="title scripthaus-logo-small"> <h1 className="title scripthaus-logo-small">
<div className="title-cursor">&#9608;</div> <div className="title-cursor">&#9608;</div>
ScriptHaus prompt&gt;
</h1> </h1>
<div className="main-content"> <div className="main-content">
<MainSideBar/> <MainSideBar/>

29
src/model.ts
View File

@ -84,6 +84,7 @@ type KeyModsType = {
type ElectronApi = { type ElectronApi = {
getId : () => string, getId : () => string,
getLocalServerStatus : () => boolean,
restartLocalServer : () => boolean, restartLocalServer : () => boolean,
onTCmd : (callback : (mods : KeyModsType) => void) => void, onTCmd : (callback : (mods : KeyModsType) => void) => void,
onICmd : (callback : (mods : KeyModsType) => void) => void, onICmd : (callback : (mods : KeyModsType) => void) => void,
@ -127,7 +128,7 @@ class Cmd {
this.sessionId = cmd.sessionid; this.sessionId = cmd.sessionid;
this.cmdId = cmd.cmdid; this.cmdId = cmd.cmdid;
this.remote = cmd.remote; 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) { setCmd(cmd : CmdDataType) {
@ -208,10 +209,10 @@ class Screen {
constructor(sdata : ScreenDataType) { constructor(sdata : ScreenDataType) {
this.sessionId = sdata.sessionid; this.sessionId = sdata.sessionid;
this.screenId = sdata.screenid; this.screenId = sdata.screenid;
this.name = mobx.observable.box(sdata.name); this.name = mobx.observable.box(sdata.name, {name: "screen-name"});
this.screenIdx = mobx.observable.box(sdata.screenidx); this.screenIdx = mobx.observable.box(sdata.screenidx, {name: "screen-screenidx"});
this.opts = mobx.observable.box(sdata.screenopts); this.opts = mobx.observable.box(sdata.screenopts, {name: "screen-opts"});
this.activeWindowId = mobx.observable.box(ces(sdata.activewindowid)); this.activeWindowId = mobx.observable.box(ces(sdata.activewindowid), {name: "screen-activewindowid"});
let swArr : ScreenWindow[] = []; let swArr : ScreenWindow[] = [];
let wins = sdata.windows || []; let wins = sdata.windows || [];
for (let i=0; i<wins.length; i++) { 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.selectedLine = mobx.observable.box(swdata.selectedline == 0 ? null : swdata.selectedline, {name: "selectedLine"});
this.setAnchor_debounced = debounce(1000, this.setAnchor.bind(this)); this.setAnchor_debounced = debounce(1000, this.setAnchor.bind(this));
if (swdata.selectedline != 0) { if (swdata.selectedline != 0) {
this.anchorLine = swdata.selectedline; this.setAnchorFields(swdata.selectedline, 0, "init");
this.anchorOffset = 0;
} }
this.termLineNumFocus = mobx.observable.box(0, {name: "termLineNumFocus"}); this.termLineNumFocus = mobx.observable.box(0, {name: "termLineNumFocus"});
} }
@ -312,6 +312,12 @@ class ScreenWindow {
return sprintf("%d:%d", this.anchorLine, this.anchorOffset); 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) { updateSelf(swdata : ScreenWindowType) {
mobx.action(() => { mobx.action(() => {
this.name.set(swdata.name); this.name.set(swdata.name);
@ -431,7 +437,7 @@ class ScreenWindow {
return; return;
} }
let data = base64ToArray(ptyMsg.ptydata64); let data = base64ToArray(ptyMsg.ptydata64);
term.updatePtyData(ptyMsg.ptypos, data); term.updatePtyData(ptyMsg.ptypos, data, "from-sw");
} }
isActive() : boolean { isActive() : boolean {
@ -561,7 +567,7 @@ class ScreenWindow {
if (usedRows != null) { if (usedRows != null) {
return usedRows; return usedRows;
} }
return 2; return (cmd.isRunning() ? 1 : 0);
} }
return termWrap.usedRows.get(); return termWrap.usedRows.get();
} }
@ -1535,7 +1541,7 @@ class Model {
this.ws.reconnect(); this.ws.reconnect();
this.inputModel = new InputModel(); this.inputModel = new InputModel();
let isLocalServerRunning = getApi().getLocalServerStatus(); 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().onTCmd(this.onTCmd.bind(this));
getApi().onICmd(this.onICmd.bind(this)); getApi().onICmd(this.onICmd.bind(this));
getApi().onLCmd(this.onLCmd.bind(this)); getApi().onLCmd(this.onLCmd.bind(this));
@ -1672,7 +1678,8 @@ class Model {
let term = sw.getTermWrap(cmdId); let term = sw.getTermWrap(cmdId);
if (term != null) { if (term != null) {
term.setIsRunning(cmdStatusIsRunning(newStatus)); term.setIsRunning(cmdStatusIsRunning(newStatus));
setTimeout(() => term.updateUsedRows(true), 500); term.updateUsedRows(true);
// setTimeout(() => term.updateUsedRows(true), 500);
} }
} }
} }

3
src/sh2.less
View File

@ -175,7 +175,7 @@ html, body, #main {
.title-cursor { .title-cursor {
position: absolute; position: absolute;
left: 157px; left: 112px;
bottom: 12px; bottom: 12px;
color: rgb(0, 177, 10); color: rgb(0, 177, 10);
.mono-font(1rem); .mono-font(1rem);
@ -389,6 +389,7 @@ html, body, #main {
.line.line-cmd { .line.line-cmd {
flex-direction: column; flex-direction: column;
scroll-margin-bottom: 20px; scroll-margin-bottom: 20px;
position: relative;
.avatar { .avatar {
cursor: pointer; cursor: pointer;

15
src/term.ts
View File

@ -45,7 +45,7 @@ class TermWrap {
ptyPos : number = 0; ptyPos : number = 0;
reloading : boolean = false; reloading : boolean = false;
dataUpdates : DataUpdate[] = []; dataUpdates : DataUpdate[] = [];
loadError : mobx.IObservableValue<boolean> = mobx.observable.box(false); loadError : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "term-loaderror"});
winSize : WindowSize; winSize : WindowSize;
numParseErrors : number = 0; numParseErrors : number = 0;
termSize : TermWinSize; termSize : TermWinSize;
@ -62,11 +62,11 @@ class TermWrap {
this.isRunning = opts.isRunning; this.isRunning = opts.isRunning;
if (this.flexRows) { if (this.flexRows) {
this.atRowMax = false; 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 { else {
this.atRowMax = true; 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) { if (opts.winSize == null) {
this.termSize = {rows: opts.termOpts.rows, cols: opts.termOpts.cols}; this.termSize = {rows: opts.termOpts.rows, cols: opts.termOpts.cols};
@ -153,7 +153,7 @@ class TermWrap {
if (termNumLines > term.rows) { if (termNumLines > term.rows) {
return term.rows; return term.rows;
} }
let usedRows = (this.isRunning ? 2 : 0); let usedRows = (this.isRunning ? 1 : 0);
if (this.isRunning && termYPos >= usedRows) { if (this.isRunning && termYPos >= usedRows) {
usedRows = termYPos + 1; usedRows = termYPos + 1;
} }
@ -259,9 +259,9 @@ class TermWrap {
setTimeout(() => { setTimeout(() => {
this.reloading = false; this.reloading = false;
this.ptyPos = ptyOffset; 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++) { 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 = []; this.dataUpdates = [];
}, delayMs); }, 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) { if (this.terminal == null) {
return; return;
} }