diff --git a/src/main.tsx b/src/main.tsx index ce89dc703..7e9602ba8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -24,6 +24,9 @@ var GlobalLines = mobx.observable.box([ {lineid: 2, userid: "sawka", ts: 1654631125000, linetype: "text", text: "again"}, ]); +var TermMap = {}; +window.TermMap = TermMap; + function fetchJsonData(resp : any, ctErr : boolean) : Promise { let contentType = resp.headers.get("Content-Type"); if (contentType != null && contentType.startsWith("application/json")) { @@ -94,7 +97,8 @@ class LineText extends React.Component<{line : LineType}, {}> { } } -function loadPtyOut(term : Terminal, sessionId : string, cmdId : string) { +function loadPtyOut(term : Terminal, sessionId : string, cmdId : string, callback?: () => void) { + console.log("loadptyout", cmdId); term.clear() let url = sprintf("http://localhost:8080/api/ptyout?sessionid=%s&cmdid=%s", sessionId, cmdId); fetch(url).then((resp) => { @@ -103,27 +107,29 @@ function loadPtyOut(term : Terminal, sessionId : string, cmdId : string) { } return resp.text() }).then((resptext) => { - term.write(resptext); + setTimeout(() => term.write(resptext, callback), 0); }); } @mobxReact.observer class LineCmd extends React.Component<{line : LineType}, {}> { - terminal : Terminal; + terminal : mobx.IObservableValue = mobx.observable.box(null, {name: "terminal"}); focus : mobx.IObservableValue = mobx.observable.box(false, {name: "focus"}); + version : mobx.IObservableValue = mobx.observable.box(0, {name: "lineversion"}); componentDidMount() { let {line, sessionid} = this.props; - this.terminal = new Terminal(); + let terminal = new Terminal(); + TermMap[line.cmdid] = terminal; let termElem = document.getElementById(this.getId()); - this.terminal.open(termElem); - loadPtyOut(this.terminal, sessionid, line.cmdid); - this.terminal.textarea.addEventListener("focus", () => { + terminal.open(termElem); + loadPtyOut(terminal, sessionid, line.cmdid, this.incVersion); + terminal.textarea.addEventListener("focus", () => { mobx.action(() => { this.focus.set(true); })(); }); - this.terminal.textarea.addEventListener("blur", () => { + terminal.textarea.addEventListener("blur", () => { mobx.action(() => { this.focus.set(false); })(); @@ -137,9 +143,16 @@ class LineCmd extends React.Component<{line : LineType}, {}> { })(); }, 100); setTimeout(() => { - loadPtyOut(this.terminal, sessionid, line.cmdid); + loadPtyOut(terminal, sessionid, line.cmdid); }, 1000); } + mobx.action(() => this.terminal.set(terminal))(); + } + + @boundMethod + incVersion() : void { + console.log("inc version!", this.version.get()+1); + mobx.action(() => this.version.set(this.version.get() + 1))(); } getId() : string { @@ -150,13 +163,23 @@ class LineCmd extends React.Component<{line : LineType}, {}> { @boundMethod doRefresh() { let {line, sessionid} = this.props; - loadPtyOut(this.terminal, sessionid, line.cmdid); + loadPtyOut(this.terminal.get(), sessionid, line.cmdid, this.incVersion); } render() { let {line} = this.props; let lineid = line.lineid.toString(); let running = false; + let term = this.terminal.get(); + let termNumLines = 0; + let termYPos = 0; + let version = this.version.get(); + console.log("render version!", this.version.get(), line.cmdid); + if (term != null) { + termNumLines = term._core.buffer.lines.length; + termYPos = term._core.buffer.y; + console.log(term._core.buffer.y, termYPos, term._core.buffer); + } return (
= 5}, {"running": running})}> @@ -166,6 +189,7 @@ class LineCmd extends React.Component<{line : LineType}, {}> {
{line.userid}
{dayjs(line.ts).format("hh:mm:ss a")}
+
{line.cmdid} ({termNumLines}) ({termYPos}) v{version}
> {line.cmdtext}
diff --git a/src/sh2.less b/src/sh2.less index 49efebaea..74dc28f13 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -79,6 +79,15 @@ color: #777; } + .cmdid { + color: #777; + margin-left: 8px; + font-size: 0.75rem; + margin-top: 5px; + font-family: 'JetBrains Mono', monospace; + font-weight: 400; + } + .cmdtext { font-family: 'JetBrains Mono', monospace; font-weight: 400;