From 5e7fe638776ce6de67a16c490ae4809886f5c70c Mon Sep 17 00:00:00 2001 From: sawka Date: Sun, 5 Feb 2023 22:07:57 -0800 Subject: [PATCH] more refactoring --- src/main.tsx | 88 +++++----------------------------------------------- src/model.ts | 38 +++++++++++++---------- src/term.ts | 8 ++--- src/types.ts | 2 +- 4 files changed, 34 insertions(+), 102 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index fabb310d..bce148b1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,7 +11,7 @@ import cn from "classnames"; import {TermWrap} from "./term"; import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts, RemoteEditType, FeStateType, ContextMenuOpts} from "./types"; import localizedFormat from 'dayjs/plugin/localizedFormat'; -import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, widthToCols, termWidthFromCols, termHeightFromRows, termRowsFromHeight} from "./model"; +import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model"; import {isModKeyPress} from "./util"; dayjs.extend(localizedFormat) @@ -255,7 +255,7 @@ class TerminalRenderer extends React.Component<{sw : ScreenWindow, line : LineTy } if (snapshot.height != curHeight) { this.props.onHeightChange(); - // console.log("line height change: ", line.linenum, snapshot.height, "=>", curHeight); + // console.log("term-render height change: ", line.linenum, snapshot.height, "=>", curHeight); } this.checkLoad(); } @@ -294,7 +294,7 @@ class TerminalRenderer extends React.Component<{sw : ScreenWindow, line : LineTy unloadTerminal(unmount : boolean) : void { let {sw, line} = this.props; - sw.disconnectElem(line.cmdid); + sw.unloadRenderer(line.cmdid); if (!unmount) { mobx.action(() => this.termLoaded.set(false))(); let termId = "term-" + getLineId(line); @@ -317,6 +317,7 @@ class TerminalRenderer extends React.Component<{sw : ScreenWindow, line : LineTy render() { let {sw, line, width, staticRender, visible} = this.props; + let isVisible = visible.get(); // for reaction let isPhysicalFocused = mobx.computed(() => sw.getIsFocused(line.linenum), {name: "computed-getIsFocused"}).get(); let isFocused = mobx.computed(() => { let swFocusType = sw.focusType.get(); @@ -348,7 +349,6 @@ class MarkdownRenderer extends React.Component<{sw : ScreenWindow, line : LineTy @mobxReact.observer class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV, onHeightChange : HeightChangeCallbackType}, {}> { - termLoaded : mobx.IObservableValue = mobx.observable.box(false, {name: "linecmd-term-loaded"}); lineRef : React.RefObject = React.createRef(); rtnStateDiff : mobx.IObservableValue = mobx.observable.box(null, {name: "linecmd-rtn-state-diff"}); rtnStateDiffFetched : boolean = false; @@ -358,21 +358,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width super(props); } - checkLoad() : void { - let {line, staticRender, visible} = this.props; - if (staticRender) { - return; - } - let vis = visible && visible.get(); - let curVis = this.termLoaded.get(); - if (vis && !curVis) { - this.loadTerminal(); - } - else if (!vis && curVis) { - this.unloadTerminal(false); - } - } - checkStateDiffLoad() : void { let {line, staticRender, visible} = this.props; if (staticRender) { @@ -395,36 +380,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width this.fetchRtnStateDiff(); } - loadTerminal() : void { - let {sw, line} = this.props; - let model = GlobalModel; - let cmd = model.getCmd(line); - if (cmd == null) { - return; - } - let termId = "term-" + getLineId(line); - let termElem = document.getElementById(termId); - if (termElem == null) { - console.log("cannot load terminal, no term elem found", termId); - return; - } - sw.connectElem(termElem, line, cmd, this.props.width); - mobx.action(() => this.termLoaded.set(true))(); - } - - unloadTerminal(unmount : boolean) : void { - let {sw, line} = this.props; - sw.disconnectElem(line.cmdid); - if (!unmount) { - mobx.action(() => this.termLoaded.set(false))(); - let termId = "term-" + getLineId(line); - let termElem = document.getElementById(termId); - if (termElem != null) { - termElem.replaceChildren(); - } - } - } - fetchRtnStateDiff() : void { if (this.rtnStateDiffFetched) { return; @@ -456,12 +411,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width this.componentDidUpdate(null, null, null); } - componentWillUnmount() { - if (this.termLoaded.get()) { - this.unloadTerminal(true); - } - } - // FIXME scrollIntoView() { let lineElem = document.getElementById("line-" + getLineId(this.props.line)); @@ -495,16 +444,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width ); } - @boundMethod - clickTermBlock(e : any) { - let {sw, line} = this.props; - let model = GlobalModel; - let termWrap = sw.getRenderer(line.cmdid); - if (termWrap != null) { - termWrap.giveFocus(); - } - } - // TODO: this might not be necessary anymore because we're using this.lastHeight getSnapshotBeforeUpdate(prevProps, prevState) : {height : number} { let elem = this.lineRef.current; @@ -516,7 +455,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width componentDidUpdate(prevProps, prevState, snapshot : {height : number}) : void { this.handleHeightChange(); - this.checkLoad(); this.checkStateDiffLoad(); } @@ -583,9 +521,6 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width ); } - let termLoaded = this.termLoaded.get(); - let usedRows = sw.getUsedRows(line, cmd, width); - let termHeight = termHeightFromRows(usedRows); let remote = model.getRemote(cmd.remoteId); let status = cmd.getStatus(); let termOpts = cmd.getTermOpts(); @@ -640,14 +575,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width -
- -
- -
-
...
 - -
+
@@ -2076,7 +2004,7 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line return; } let lineElemArr = linesElem.querySelectorAll(".line"); - if (lineElemArr == null) { + if (lineElemArr == null || lineElemArr.length == 0) { sw.setAnchorFields(null, 0, "no-line"); return; } @@ -2369,8 +2297,8 @@ class ScreenWindowView extends React.Component<{sw : ScreenWindow}, {}> { this.width.set(width); this.height.set(height); let {sw} = this.props; - let cols = widthToCols(width); - let rows = termRowsFromHeight(height); + let cols = windowWidthToCols(width); + let rows = windowHeightToRows(height); if (sw == null || cols == 0 || rows == 0) { return; } diff --git a/src/model.ts b/src/model.ts index 3d1bc41a..613dfc4c 100644 --- a/src/model.ts +++ b/src/model.ts @@ -27,12 +27,20 @@ type SWLinePtr = { sw : ScreenWindow, }; -function widthToCols(width : number) : number { +function windowWidthToCols(width : number) : number { let cols = Math.trunc((width - 50) / DefaultCellWidth) - 1; cols = boundInt(cols, MinTermCols, MaxTermCols); return cols; } +function windowHeightToRows(height : number) : number { + let rows = Math.floor((height - 80)/DefaultCellHeight) - 1; + if (rows <= 0) { + rows = 1; + } + return rows; +} + function termWidthFromCols(cols : number) : number { return Math.ceil(DefaultCellWidth*cols) + 15; } @@ -41,14 +49,6 @@ function termHeightFromRows(rows : number) : number { return Math.ceil(DefaultCellHeight*rows); } -function termRowsFromHeight(height : number) : number { - let rows = Math.floor((height - 80)/DefaultCellHeight) - 1; - if (rows <= 0) { - rows = 1; - } - return rows; -} - function cmdStatusIsRunning(status : string) : boolean { return status == "running" || status == "detached"; } @@ -472,7 +472,11 @@ class ScreenWindow { } termSizeCallback(rows : number, cols : number) : void { - if (!this.isActive() || cols == 0 || rows == 0) { + if (!this.isActive()) { + console.log("termSize (not active)"); + return; + } + if (cols == 0 || rows == 0) { return; } if (rows == this.lastRows && cols == this.lastCols) { @@ -552,7 +556,7 @@ class ScreenWindow { console.log("term-wrap already exists for", this.screenId, this.windowId, cmdId); return; } - let cols = widthToCols(width); + let cols = windowWidthToCols(width); let usedRows = GlobalModel.getTUR(this.sessionId, cmdId, cols); if (line.contentheight != null && line.contentheight != -1) { usedRows = line.contentheight; @@ -575,10 +579,10 @@ class ScreenWindow { return; } - disconnectElem(cmdId : string) { - let termWrap = this.renderers[cmdId]; - if (termWrap != null) { - termWrap.dispose(); + unloadRenderer(cmdId : string) { + let rmodel = this.renderers[cmdId]; + if (rmodel != null) { + rmodel.dispose(); delete this.renderers[cmdId]; } } @@ -590,7 +594,7 @@ class ScreenWindow { } let termWrap = this.getRenderer(cmd.cmdId); if (termWrap == null) { - let cols = widthToCols(width); + let cols = windowWidthToCols(width); let usedRows = GlobalModel.getTUR(this.sessionId, cmd.cmdId, cols); if (usedRows != null) { return usedRows; @@ -2420,6 +2424,6 @@ if ((window as any).GlobalModel == null) { GlobalModel = (window as any).GlobalModel; GlobalCommandRunner = (window as any).GlobalCommandRunner; -export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, ScreenWindow, riToRPtr, widthToCols, termWidthFromCols, termHeightFromRows, termRowsFromHeight}; +export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, ScreenWindow, riToRPtr, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows}; diff --git a/src/term.ts b/src/term.ts index 00c81cdc..72a0603a 100644 --- a/src/term.ts +++ b/src/term.ts @@ -3,7 +3,7 @@ import {Terminal} from 'xterm'; import {sprintf} from "sprintf-js"; import {boundMethod} from "autobind-decorator"; import {v4 as uuidv4} from "uuid"; -import {GlobalModel, widthToCols, GlobalCommandRunner, termHeightFromRows, termRowsFromHeight} from "./model"; +import {GlobalModel, GlobalCommandRunner, termHeightFromRows, windowWidthToCols, windowHeightToRows} from "./model"; import {boundInt} from "./util"; import type {TermOptsType, TermWinSize, RendererContext, WindowSize} from "./types"; @@ -69,7 +69,7 @@ class TermWrap { this.termSize = {rows: opts.termOpts.rows, cols: opts.termOpts.cols}; } else { - let cols = widthToCols(opts.winSize.width); + let cols = windowWidthToCols(opts.winSize.width); this.termSize = {rows: opts.termOpts.rows, cols: cols}; } let theme = { @@ -239,8 +239,8 @@ class TermWrap { } resizeWindow(size : WindowSize) : void { - let cols = widthToCols(size.width); - let rows = termRowsFromHeight(size.height); + let cols = windowWidthToCols(size.width); + let rows = windowHeightToRows(size.height); this.resize({rows, cols}); } diff --git a/src/types.ts b/src/types.ts index 1f39af09..fbdff1a9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -360,4 +360,4 @@ type WindowSize = { width: number, }; - export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel}; +export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel};