From 0e04a32e29f21be6ac5aa53559d6965f074474eb Mon Sep 17 00:00:00 2001 From: sawka Date: Thu, 15 Sep 2022 00:18:20 -0700 Subject: [PATCH] update to show remote pty in remoteshow window --- src/main.tsx | 28 ++++++++++++++++++++++++---- src/model.ts | 46 +++++++++++++++++++++++++++++++++++++++++++--- src/sh2.less | 12 ++++++++++++ src/term.ts | 11 ++++++++--- src/types.ts | 1 + 5 files changed, 88 insertions(+), 10 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 3d2f44b9..c777c8b2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -14,6 +14,11 @@ import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWi dayjs.extend(localizedFormat) +const CellHeightPx = 16; +const CellWidthPx = 8; +const RemotePtyRows = 10; +const RemotePtyCols = 80; + type InterObsValue = { sessionid : string, windowid : string, @@ -343,11 +348,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width ); } let termLoaded = this.termLoaded.get(); - let cellHeightPx = 16; - let cellWidthPx = 8; - let termWidth = Math.max(Math.trunc((width - 20)/cellWidthPx), 10); + let termWidth = Math.max(Math.trunc((width - 20)/CellWidthPx), 10); let usedRows = sw.getUsedRows(cmd, width); - let totalHeight = cellHeightPx * usedRows; + let totalHeight = CellHeightPx * usedRows; let remote = model.getRemote(cmd.remoteId); let status = cmd.getStatus(); let termOpts = cmd.getTermOpts(); @@ -679,6 +682,14 @@ class InfoMsg extends React.Component<{}, {}> { } return s.substr(slashIdx+1); } + + @boundMethod + clickTermBlock(e : any) { + let inputModel = GlobalModel.inputModel; + if (inputModel.remoteTermWrap != null) { + inputModel.remoteTermWrap.terminal.focus(); + } + } render() { let model = GlobalModel; @@ -688,6 +699,9 @@ class InfoMsg extends React.Component<{}, {}> { let line : string = null; let istr : string = null; let idx : number = 0; + let ptyRemoteId = (infoMsg == null ? null : infoMsg.ptyremoteid); + let isTermFocused = (inputModel.remoteTermWrap == null ? false : inputModel.remoteTermWrap.isFocused.get()); + console.log("ptyremoteid", ptyRemoteId); return (
@@ -707,6 +721,12 @@ class InfoMsg extends React.Component<{}, {}> {
+
+ +
+ +
+
0}>
diff --git a/src/model.ts b/src/model.ts index 184ebf89..b706cc59 100644 --- a/src/model.ts +++ b/src/model.ts @@ -11,6 +11,8 @@ import {WSControl} from "./ws"; var GlobalUser = "sawka"; const DefaultCellWidth = 8; const DefaultCellHeight = 16; +const RemotePtyRows = 10; // also in main.tsx +const RemotePtyCols = 80; function widthToCols(width : number) : number { let cols = Math.trunc((width - 25) / DefaultCellWidth) - 1; @@ -635,8 +637,6 @@ class InputModel { infoMsg : OV = mobx.observable.box(null); infoTimeoutId : any = null; - - ptyRemoteId : OV = mobx.observable.box(null); remoteTermWrap : TermWrap; constructor() { @@ -668,6 +668,14 @@ class InputModel { } } + getPtyRemoteId() : string { + let info = this.infoMsg.get(); + if (info == null || isBlank(info.ptyremoteid)) { + return null; + } + return info.ptyremoteid; + } + hasFocus() : boolean { let mainInputElem = document.getElementById("main-cmd-input"); if (document.activeElement == mainInputElem) { @@ -994,6 +1002,7 @@ class InputModel { this._clearInfoTimeout(); mobx.action(() => { this.infoMsg.set(info); + this.syncTermWrap(); if (info == null) { this.infoShow.set(false); } @@ -1041,6 +1050,7 @@ class InputModel { this.infoShow.set(false); if (setNull) { this.infoMsg.set(null); + this.syncTermWrap(); } })(); } @@ -1093,10 +1103,40 @@ class InputModel { this.resetHistory(); this.dropModHistory(false); this.infoMsg.set(null); + this.syncTermWrap(); this._clearInfoTimeout(); })(); } + termKeyHandler(e : any) : void { + console.log("term-remote key", e); + } + + syncTermWrap() : void { + let infoMsg = this.infoMsg.get(); + let remoteId = (infoMsg == null ? null : infoMsg.ptyremoteid); + let curTermRemoteId = (this.remoteTermWrap == null ? null : this.remoteTermWrap.termContext.remoteId); + if (remoteId == curTermRemoteId) { + return; + } + if (this.remoteTermWrap != null) { + this.remoteTermWrap.dispose(); + this.remoteTermWrap = null; + console.log("dispose termwrap"); + } + if (remoteId != null) { + let elem = document.getElementById("term-remote"); + if (elem == null) { + console.log("ERROR null term-remote element"); + } + else { + let termOpts = {rows: RemotePtyRows, cols: RemotePtyCols, flexrows: false, maxptysize: 64*1024}; + this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, this.termKeyHandler.bind(this)); + console.log("make termwrap", this.remoteTermWrap); + } + } + } + getCurLine() : string { let model = GlobalModel; let hidx = this.historyIndex.get(); @@ -1418,7 +1458,7 @@ class Model { } else { // remote update - let activeRemoteId = this.inputModel.ptyRemoteId.get(); + let activeRemoteId = this.inputModel.getPtyRemoteId(); if (activeRemoteId != ptyMsg.remoteid || this.inputModel.remoteTermWrap == null) { return; } diff --git a/src/sh2.less b/src/sh2.less index 41f82b78..85e55d9b 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -409,6 +409,18 @@ html, body, #main { } } +.cmd-input-info { + .terminal-wrapper { + background-color: #000; + padding: 2px 10px 5px 4px; + margin: 5px 5px 10px 5px; + box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3); + &.focus { + box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3); + } + } +} + .line { padding: 10px 5px 5px 5px; margin: 0px 5px 5px 5px; diff --git a/src/term.ts b/src/term.ts index cc4f28d1..1b2c8025 100644 --- a/src/term.ts +++ b/src/term.ts @@ -63,9 +63,14 @@ class TermWrap { this.atRowMax = true; this.usedRows = mobx.observable.box(termOpts.rows); } - let cols = Math.trunc((winSize.width - 25) / DefaultCellWidth) - 1; - cols = boundInt(cols, MinTermCols, MaxTermCols); - this.termSize = {rows: termOpts.rows, cols: cols}; + if (winSize == null) { + this.termSize = {rows: termOpts.rows, cols: termOpts.cols}; + } + else { + let cols = Math.trunc((winSize.width - 25) / DefaultCellWidth) - 1; + cols = boundInt(cols, MinTermCols, MaxTermCols); + this.termSize = {rows: termOpts.rows, cols: cols}; + } this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 14, theme: {foreground: "#d3d7cf"}}); this.terminal._core._inputHandler._parser.setErrorHandler((state) => { this.numParseErrors++; diff --git a/src/types.ts b/src/types.ts index 01bbe909..e826ae4e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -270,6 +270,7 @@ type InfoType = { infocomps? : string[], infocompsmore? : boolean, timeoutms? : number, + ptyremoteid? : string, }; type HistoryQueryOpts = {